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>