CODEWITHSUNDEEP
htmlcss
user2954587
user2954587

Reputation: 4861

Overlapping divs with the first element in front

How can I have 4 images where the first image has the highest z-index, and the next the second highest (i'm also open to other suggestions as to how to accomplish this)? Basically reverse the following depth?

Fiddle

img {
  display: inline;
  margin-right: -40px;
  border-radius: 50%;
}

div:nth-child(1) {
  z-index: 1000;
}
<div>
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100/000">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100/000">
</div>

Upvotes: 2

Views: 504

Answers (1)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

To use z-index as expected, you'll need to set the <img> position to relative.

Also the nth-child has to be of set to the <img> tag

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

img {
  display: inline;
  position: relative;
  margin-right: -40px;
  border-radius: 50%;
}

div img:nth-child(1) {
  z-index: 3;
}
div img:nth-child(2) {
  z-index: 2;
}
div img:nth-child(3) {
  z-index: 1;
}div img:nth-child(4) {
  z-index: 0;
}
<div>
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100/000">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100/000">
</div>

Upvotes: 3

Related Questions