HTML DIV堆疊

Question

我工作的佈局改變了z-index的行爲。

這可能嗎？

黃色框是一個下拉菜單。它應該在紅色框內。

Answer 1

這裏是所有你需要

div { 
 
height: 100px; 
 
    width: 100px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.div1{ 
 
    background: #f00; 
 
} 
 
.div2{ 
 
top: 30px; 
 
} 
 
.div_child{ 
 
background: #3a2525; 
 
    left: auto; 
 
    right: 0; 
 
    width: 50px; 
 
    z-index: 1; 
 
    }

<div class="div1"> 
 
1 
 
<div class="div_child"> 
 
child 
 
</div> 
 
</div> 
 
<div class="div2"> 
 
2 
 

 

 
</div>

Answer 2

幾乎任何可能與CSS3。然而div 1中的元素需要分開才能工作。如果它在div 1內，它會將div 1拖動到其中。你會得到更大的靈活性，如果側DIV是在它自己的

但是對於你的具體的例子，你會需要這樣的東西：

HTML：

<div class="top"></div> 
<div class="bottom"></div> 
<div class="side"></div> 

CSS：

.top { 
    width: 90%; 
    margin-left: 10%; 
    height: 200px; 
    height: 250px; 
    background: red; 
} 

.bottom { 
    width: 90%; 
    height: 200px; 
    height: 250px; 
    margin-left: 5%; 
    background: grey; 
    margin-top: -150px; 
} 

.side { 
    width: 20%; 
    height: 200px; 
    height: 250px; 
    margin-left: 78%; 
    background: yellow; 
    margin-top: -300px; 
} 

Working CodePen也在這裏：https://codepen.io/WebDevelopWolf/pen/mBLqxm

Answer 3

不知道爲什麼會這樣的作品，但它可能對你會有所幫助：

#div1, #div2{ 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
#div1{ 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
#div2{ 
 
    background-color: green; 
 
} 
 

 
#div2{ 
 
    margin-left: 50px; 
 
    margin-top: -300px; 
 
    position: relative; 
 
} 
 

 
#div1 > div{ 
 
    background-color: yellow; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    right: 0; 
 
    top: 50px; 
 
    z-index: 2; 
 
} 
 

 

 
.as-console-wrapper{ display: none !important;}

<div id="div1"> 
 
    DIV 1 
 
    <div>INSIDE DIV 1</div> 
 
</div> 
 

 
<div id="div2"> 
 
    DIV 2 
 
</div>