Issue
I am trying to use CSS to let multiple pairs of images overlay within their own div. For example, in the following code, I want img2 over img1, and img4 over img3.
<div class="container">
<img class="base" src="img1.jpg">
<img class="overlay" src="img2.jpg">
</div>
<div class="container">
<img class="base" src="img3.jpg">
<img class="overlay" src="img4.jpg">
</div>
All I have found out is something like:
.base {
position: absolute;
}
.overlay {
position: relative;
}
which mess all 4 images together. Any help are high appreciated!
A further question, is it possible to not differentiate the "base" and the "overlay" layer, and just let img1 and img2 both display at the same place, and img3 and img4 both display at the same place? Like the following:
<div class="container">
<img src="img1.jpg">
<img src="img2.jpg">
</div>
<div class="container">
<img src="img3.jpg">
<img src="img4.jpg">
</div>
Solution
You will need to set the position of .container
and .base
to relative
and set the z-index
as per your requirement. Something like:
.container {
position: relative;
display: inline-block;
}
.base {
position: relative;
z-index: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
EDIT:
As part of your second question, yes it is possible to achieve the same effect without differentiating base
and overlay
by using the :nth-child
pseudo-class selector. The updated code becomes:
/*... rest of css*/
.container img:nth-child(1) {
position: relative;
z-index: 1;
}
.container img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
Answered By - mandy8055
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.