How to place a div over another

2018-06-27 03:02:23

This question already has an answer here:

How to overlay one div over another div 6 answers

You need to use z-index and position:absolute CSS properties. Additionally you need to also position your second DIV (which is on top of the other) by giving some values to top and left CSS attributes. Following is an example:

#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}

See this JSfiddle demo

Z-index makes changes on the third axis. Element with a larger z-index number will cover an element with a smaller one.

For trivia sake, default z-index of any element is auto , which means it inherits a value from its parent element. An html element has a z-index of 0 .

Edit: Check out this JSFiddle. The #left div is above the #right one. Remove z-index property from CSS styling of a left div, and you will see that it isn't going to be above the other div no more.

我并不完全达到预期的结果，但这是一个POC

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
    z-index: 1;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
    position: absolute;
    z-index: 2;
}

<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>

链接地址: http://www.djcxy.com/p/75840.html

上一篇: 在html中，你如何将图像与其他图像重叠？

下一篇: 如何将div放在另一个div上