HTML DIV堆叠

Question

我使用的布局改变了z-index的行为。

这可能吗？

黄色框是一个下拉菜单。它应该在红框内。

Answer 1

这就是你需要的一切

＆＃13;

＆＃13;

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;
    }

＆＃13;

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


</div>

＆＃13;

＆＃13;

＆＃13;

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;
}

工作CodePen也在这里：https://codepen.io/WebDevelopWolf/pen/mBLqxm

Answer 3

不确定为什么会这样，但它可能会对您有所帮助：

＆＃13;

＆＃13;

#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;}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;