Question

您好我试图以编程方式（javascript或css）将div放在另一个div之上。 div是完全独立的，意思如下：

<div class="bottom">
   <img src="image"></img>
</div>
<div class="Top">
   <img src="image2"></img>
</div>

我是javascript，css的新手，但我找到的解决方案的清晰度是div内的单独div，允许他们使用zIndex。如果您希望我提供有关我的问题的更多信息，请与我们联系。谢谢你的帮助!!

Answer 1

您可以使用绝对定位设置这些设置，并更改z-index以选择您想要的div。请参阅小提琴：https://jsfiddle.net/c259LrpL/27/

.top{position: absolute; top: 0; left: 0; z-index: 1;}
.bottom{position: absolute; top: 0; left: 0; z-index: -1;}

Answer 2

元素定位绝对不需要z-index属性，但它可能有助于防止冲突。

<style>
    .stack-wrapper { position: relative; }
    .bottom { position: static; z-index: 1; }
    .top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
</style>

<div class="stack-wrapper">
    <div class="bottom">
       <img src="image"></img>
    </div>
    <div class="top">
       <img src="image2"></img>
    </div>
</div>

Answer 3

将包装器div设置为position：relative;如果你使用position：absolute，那么内部div将位于顶部;和顶部：0; ：）

将Div放在完全独立的div

3 个答案: