I have some HTML with two divs:
<div>
<div id="backdrop"><img alt="" src='/backdrop.png' /></div>
<div id="curtain" style="background-image:url(/curtain.png);background-position:1开发者_Python百科00px 200px; height:250px; width:500px;"> </div>
</div>
I want the second div #curtain
to appear on top of the div #backdrop
. The two divs are the same size, however I'm not sure how to position the second div on top of the other.
Use CSS position: absolute;
followed by top: 0px; left 0px;
in the style
attribute of each DIV. Replace the pixel values with whatever you want.
You can use z-index: x;
to set the vertical "order" (which one is "on top"). Replace x
with a number, higher numbers are on top of lower numbers.
Here is how your new code would look:
<div>
<div id="backdrop" style="z-index: 1; position: absolute; top: 0; left: 0;"><img alt="" src='/backdrop.png' /></div>
<div id="curtain" style="z-index: 2; position: absolute; top: 0; left: 0; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;"> </div>
</div>
There are many ways to do it, but this is pretty simple and avoids issues with disrupting inline content positioning. You might need to adjust for margins/padding, too.
#backdrop, #curtain {
height: 100px;
width: 200px;
}
#curtain {
position: relative;
top: -100px;
}
To properly display one div on top of another, we need to use the property position
as follows:
- External div:
position: relative
- Internal div:
position: absolute
I found a good example here:
.dvContainer {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
background-color: #ccc;
}
.dvInsideTL {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 100px;
background-color: #ff751a;
opacity: 0.5;
}
<div class="dvContainer">
<table style="width:100%;height:100%;">
<tr>
<td style="width:50%;text-align:center">Top Left</td>
<td style="width:50%;text-align:center">Top Right</td>
</tr>
<tr>
<td style="width:50%;text-align:center">Bottom Left</td>
<td style="width:50%;text-align:center">Bottom Right</td>
</tr>
</table>
<div class="dvInsideTL">
</div>
</div>
I hope this helps,
Zag.
Alternate solution using CSS grid
:
.grid-container { display: grid; }
/* 'curtain' grid item is placed over the 'backdrop' grid item */
#backdrop, #curtain { grid-area: 1/1; }
/* Cosmetic things for showing the result*/
#backdrop { border: 12px solid red; }
#curtain { border: 10px solid blue; }
<div class="grid-container">
<div id="backdrop">hello</div>
<div id="curtain">world</div>
</div>
You can see the grid item with a blue border placed over the grid item with a red border. The idea is both the grid items are placed at the same row = 1, and col = 1 indices and div("curtain") at the last covers previous div(s) if any.
Another Example - Sliding one div over another div:
let overItem = document.getElementById('overItemId');
let index = 1;
let range = 4;
let randomPickScroller = function() {
let colIndex = ++index % range;
overItem.style.gridColumnStart = colIndex + 1;
};
randomPickScroller();
setInterval(()=>randomPickScroller(), 500);
.grid-container { display: grid; }
/* 'curtain' grid item is placed over the 'backdrop' grid item */
#backdrop, #curtain, #overItemId { grid-area: 1/1; }
#backdrop, #curtain {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
/* Cosmetic things for showing the result*/
#backdrop { border: 1px solid red; }
#overItemId { border: 1px solid blue; }
<div class="grid-container">
<div id="backdrop">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
<div id="curtain">
<div id="overItemId">----</div>
</div>
</div>
Here is the jsFiddle
#backdrop{
border: 2px solid red;
width: 400px;
height: 200px;
position: absolute;
}
#curtain {
border: 1px solid blue;
width: 400px;
height: 200px;
position: absolute;
}
Use Z-index to move the one you want on top.
Have the style for the parent div and the child divs' set as following. It worked for my case, hope it helps you as well..
<div id="parentDiv">
<div id="backdrop"><img alt="" src='/backdrop.png' /></div>
<div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;"> </div>
</div>
in your JS:
document.getElementById('parentDiv').style.position = 'relative';
document.getElementById('backdrop').style.position = 'absolute';
document.getElementById('curtain').style.position = 'absolute';
document.getElementById('curtain').style.zIndex= '2';//this number has to be greater than the zIndex of 'backdrop' if you are setting any
or in your CSS as in this working example:::
#parentDiv{
background: yellow;
height: 500px;
width: 500px;
position: relative;
}
#backdrop{
background: red;
height: 300px;
width: 300px;
position: absolute;
}
#curtain{
background: green;
height: 100px;
width: 100px;
position: absolute;
z-index: 2;
margin: 100px 0px 150px 100px;
}
<div id="parentDiv"><h2>
THIS IS PARENT DIV
</h2>
<div id="backdrop"><h4>
THIS IS BACKDROP DIV
</h4></div>
<div id="curtain"><h6>
THIS IS CURTAIN DIV
</h6></div>
</div>
精彩评论