z-index: -1 not working having positioning

Question

I'm trying to add a kind of offset border to my img using z-index:-1. Using z-index:1 i get the border displayed on top and using z-index:-1 the border doesn't appear. I searched why could this happen and the most common answer was that positioning was missing and i have a position realtive in the div and position absolute on after. And i have position relative on my parent div and absolute in my after. I tried instead of using after making the outside border another div but doing this makes the image "dissapear".

Here is how the image looks with z-index:1

And how it looks with z-index:0

.styled-pic {
  position: relative;
  max-width: 300px;
}

.styled-pic::after {
  position: absolute;
  z-index: -1;
  border: 2px solid;
  border-color: rgb(114, 70, 184);
  border-radius: 4px;
  top: 40px;
  left: 20px;
  content: "";
  display: block;
  width: 300px;
  height: 300px;
}

.about-image {
  height: 300px;
  width: 300px;
  margin-top: 22px;
}



@media (max-width: 768px) {
  .styled-pic {
    display: block;
    margin: auto;
    width: 70%;
  }

  .about-image {
    margin-top: 0;
  }
}

@media (max-width: 425px) {
  .about-image {
    height: 262.5px;
    width: 262.5px;
  }
}

@media (max-width: 375px) {
  .about-image {
    height: 227.5px;
    width: 227.5px;
  }
}

@media (max-width: 320px) {
  .about-image {
    height: 189px;
    width: 189px;
  }
}

<div className="styled-pic">
          <img
            className="about-image"
            src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>

I'm not sure of what you want but... maybe let the photo z-index = 2 would do it? — L777, Feb 18 '22 at 04:43

ash · Answer 1 · 2022-02-18T04:49:56.453

0

I think you want to create something like this. Wait for a while I will upload the solution slowly. code pen

https://codepen.io/ash_000001/pen/vYWdEjW?editors=1100

body {
  background: pink;
  padding: 30px;
}
.about-image{
  height: 165px;
  width: 275px;
  
}
div {
  background: white;
  height: 165px;
  width: 275px;
  position: relative;
}
div:after {
  content: '';
  background: transparent;
  border: 1px solid white;
  top: 7px;
  right: 7px;
  bottom: -7px;
  left: -7px;
  position: absolute;
  z-index: -1;
}

<div><img
            class="about-image"
            src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img></div>

edited Feb 18 '22 at 04:49

answered Feb 18 '22 at 04:40

ash

1,065
1
5
20

Already found the solution, none the less tysm for your time and effort. – Mat Feb 18 '22 at 04:48
But can you mark it correct because i did there. Run the snippet just now i updated. Please – ash Feb 18 '22 at 04:49
I asked because he said he found the solution. But I didn't know that it's completely prohibited to use those words together. So thank you and sorry, I won't use those words next time. – ash Feb 18 '22 at 05:27
@カメロン sorry for the last time. – ash Feb 18 '22 at 05:36

score 0 · Answer 2 · answered Feb 18 '22 at 04:49

0

Adding z-index:2 to the styled-pic class fixes it.

Final result:

.styled-pic {
  position: relative;
  max-width: 300px;
  z-index: 2;
}

.styled-pic::after {
  position: absolute;
  z-index: -1;
  border: 2px solid;
  border-color: rgb(114, 70, 184);
  border-radius: 4px;
  top: 40px;
  left: 20px;
  content: "";
  display: block;
  width: 300px;
  height: 300px;
}

answered Feb 18 '22 at 04:49

Mat

119
1
11

You seem to be distorting the photo – Frank Fajardo Feb 18 '22 at 05:07

score 0 · Answer 3 · answered Feb 18 '22 at 04:50

See the modified code snippet below.

Added position: absolute; to the .about-image itself, so it preserves the context with the other absolute-positioned element (i.e. ::after pseudo element.)

.styled-pic {
  position: relative;
  max-width: 300px;
}

.styled-pic::after {
  position: absolute;
  z-index: 0;
  border: 2px solid;
  border-color: rgb(114, 70, 184);
  border-radius: 4px;
  top: 40px;
  left: 20px;
  content: "";
  display: block;
  width: 300px;
  height: 300px;
}

.about-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
  object-fit: cover;
  margin-top: 22px;
  z-index: 3;
}

<div class="styled-pic">
  <img class="about-image" src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg" />
</div>

score 0 · Answer 4 · answered Feb 18 '22 at 04:58

Try this below code

body {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.styled-pic {
  position: relative;
  max-width: 300px;
}

.styled-pic::after {
  position: absolute;
  z-index: 10;
  border: 2px solid;
  border-color: rgb(114, 70, 184);
  border-radius: 4px;
  top: 0;
  left: -2px;
  content: "";
  display: block;
  width: 300px;
  height: 300px;
}

.about-image {
  height: 300px;
  width: 300px;
  margin-top: 22px;
}

@media (max-width: 768px) {
  .styled-pic {
    display: block;
    margin: auto;
    width: 70%;
  }

  .about-image {
    margin-top: 0;
  }
}

@media (max-width: 425px) {
  .about-image {
    height: 262.5px;
    width: 262.5px;
  }
}

@media (max-width: 375px) {
  .about-image {
    height: 227.5px;
    width: 227.5px;
  }
}

@media (max-width: 320px) {
  .about-image {
    height: 189px;
    width: 189px;
  }
}

 <div class="styled-pic">
      <img
        class="about-image"
        src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>

z-index: -1 not working having positioning

4 Answers4