Implement depths in XHTML Strict
-
19-09-2019 - |
Question
I would like to implement <div>
beneath a <table>
, in other words, the div will be visible, as the table has transparent png's in but it will behind the <table>
.
Does anyone know how to do this?
I tried float:left
and differing z-index
's, but to no avail.
Solution
You're on the right track. But when using the Z-index, your elements must also be absolute-positioned.
Here's an example using divs, but it may as well be tables...
CSS:
div.top {
width: 300px;
height: 200px;
position: absolute;
left: 500px;
top: 50px;
z-index: 2
}
div.bottom {
width: 300px;
height: 200px;
position: absolute;
left: 600px;
top: 100px;
z-index: 1
}
HTML:
<div class="top">I'm on top</div>
<div class="bottom">I'm below</div>
OTHER TIPS
z-index only works on absolutely positioned elements. You could try setting position: absolute
and then using the top, right, bottom, left
styles to position the elements on top of each other.
You could also try putting the <div> in front of the table in the markup, set float: left
on the div, and them move the table left, to position it on top of the div, by using a negative margin-left
value.
For example:
<div id="d1"></div>
<div id="d2"></div>
Using the following CSS, the second div would be 50px into the first div.
div {
width: 100px;
height: 100px;
border: solid 1px rgb(0, 0, 0);
}
#d1 {
float: left;
background-color: rgb(255, 0, 0);
}
#d2 {
float: left;
margin-left: -50px;
background-color: rgb(0, 255, 0);
opacity: 0.5;
}
The second div there would be your table. Just easier to demonstrate with divs :)
Just to add to the previous two answers. Z-index is not limited to only those elements that are positioned absolutely. Z-index also works on elements that have relative positioning.