Please refer to the codes below :
<ul>
<li style="height:100px; overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
From the codes above, we know that we can only see 100px height of black background. My question is how can we see 500px height of <div>
black background? In other words, how can I make the <div>
appear in front of <li>
?
The black div
will display the full 500px unless overflow:hidden
is set on the 100px li
I think you're missing something.
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
</ul>
In FF4, this displays a 100px black bar, followed by a 500px red block.
A little bit different example:
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:blue;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:green;">
</div>
</li>
</ul>
You can set the z-index in css
<div style="z-index: -1"></div>
Upper div use higher z-index and lower div use lower z-index then use absolute/fixed/relative position
In order an element to appear in front of another you have to give higher z-index to the front element, and lower z-index to the back element, also you should indicate position: absolute/fixed...
Example:
<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>
Source: Stackoverflow.com