Div заменяет div, но перекрывает оболочку

Я пытаюсь создать страницу, в которой определенный div должен стать видимым и заменить другой div (другой div будет установлен на невидимый).Div заменяет div, но перекрывает оболочку

Я могу получить первый div над другим div, используя position: absolute; , но проблема в том, что два divs также находятся в других div. И если я использую position: absolute;, тогда эти два div будут перекрывать другие div. Я сделал пример, пожалуйста, посмотрите:

#wrapper { 
 
    background-color: red; 
 
    min-height: 700px; 
 
    } 
 

 
#list1 { 
 
    background-color: yellow; 
 
    min-height: 200px; 
 
    position: relative; 
 
} 
 

 
#listinList { 
 
    background-color: blue; 
 
    min-height: 200px; 
 
    position: absolute; 
 
} 
 

 
#listOverList { 
 
    background-color: green; 
 
    min-height: 200px; 
 
    position: absolute; 
 
}

<div id="list1"> 
 
    beginning list 1 
 

 
    <div id="listinList"> 
 
    The first list 
 
    </div> 
 

 
    <div id="listOverList"> 
 
    this must go over the listinlist div 
 
    </div> 
 
</div>

Мой вопрос теперь: как я могу получить зеленый блок (как в примере), чтобы остаться в желтой оберточной дивы.

источник

2016-05-23 YdB

Можете ли вы создать визуальный? Я не знаю, чего вы хотите достичь. – roNn23

См. Этот живой пример: https://jsfiddle.net/qacLn2nh/1/, зеленый блок должен оставаться в желтом блоке, и желтый блок должен расти соответственно – YdB

Просто спрячьте div#listinList. После этого добавьте позицию в div#listOverList. Я установил div#listOverList на половину непрозрачности, чтобы показать позицию над желтым div.

#wrapper { 
 
    background-color: red; 
 
    min-height: 700px; 
 
    } 
 

 
#list1 { 
 
    background-color: yellow; 
 
    min-height: 200px; 
 
    position: relative; 
 
} 
 

 
#listinList { 
 
    background-color: blue; 
 
    min-height: 200px; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
#listOverList { 
 
    min-height: 200px; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0.5; 
 
}

<div id="list1"> 
 
    beginning list 1 
 
    <div id="listinList"> 
 
    The first list 
 
    </div> 
 
    <div id="listOverList"> 
 
    this must go over the listinlist div 
 
    </div> 
 
</div>

источник

2016-05-23 09:10:00 roNn23

Не уверен, что это именно то, что вы хотели, но на основе вашей скрипки вы пытались добавить фактические позиции, которые вы хотите использовать в #listinList и/или #listOverList, например.

#listOverList { 
    ... 
    top: 0; 
    left: 0; 
}

Это должно привести к тому, что divs полностью покрывают родителя.

источник

2016-05-23 09:09:49 irot

попробовать это для перекрывающей выпуска:

<html> 
 
<head> 
 
\t <title></title> 
 
\t <style> 
 
\t #wrapper{ 
 
\t \t background-color: red; 
 
\t \t min-height:700px; 
 
\t } 
 

 
\t #list1{ 
 
\t \t background-color:yellow; 
 
\t \t min-height:200px; 
 
\t \t position:relative; 
 
\t } 
 

 
\t #listinList { 
 
       background-color: blue; 
 
       min-height: 170px; 
 
       position: absolute; 
 
       width: 20%; 
 
     } 
 
\t #listOverList { 
 
       background-color: green; 
 
       min-height: 170px; 
 
       position: absolute; 
 
       right: 0; 
 
       width: 80%; 
 
     }

<body> 
 

 
<div id= "wrapper"> 
 

 
\t top 
 
<div id="list1"> 
 
\t beginning list 1 
 
\t <div id="listinList"> 
 
\t \t The first list 
 
\t </div> 
 
\t <div id="listOverList"> 
 
\t \t this must go over the listinlist div 
 
\t </div> 
 
</div> \t 
 

 
test 
 
</div> 
 

 

 
</body>

источник

2016-05-23 09:13:10 Jainam

Div заменяет div, но перекрывает оболочку

ответ

Смежные вопросы