Force absolute positioned div "behind" relative positioned div

Question

I'm trying to create two offset borders around an image, one up and to the left, the other down and to the right, shown here

With my current code, these outlines appear in front of the image. I'm wondering if there's a way to force them behind, or if anyone has a better way to go about this?

HTML:

<div class="row">
   <div class="col" style="text-align:center">
      <div class="imagecontainer_staff">
         <img src="images/dodi_haug.jpg" class="mx-auto d-block" width="200" height="300" alt="Dodi Haug">
      </div>

CSS:

.imagecontainer_staff {
    display:inline-block;
    position: relative;
}

.imagecontainer_staff::before {
    position: absolute;
    top: -3%;
    left: -3%;
    width: 100%;
    height: 100%;
    border: 4px solid cornflowerblue;
    content: '';
}

.imagecontainer_staff::after {
    position: absolute;
    top: +3%;
    left: +3%;
    width: 100%;
    height: 100%;
    border: 4px solid black;
    content: '';
}

position:relative to the image and z-index:1 to the image (or a bigger value) — Temani Afif, May 26 '21 at 19:48
As a sidenote, you shouldn't try to do it with a border in the first place. Use `shadow` instead — tacoshy, May 26 '21 at 19:51

score 1 · Accepted Answer · answered May 26 '21 at 19:49

Is that work? I added z-index for imagecontainer_staff::after

.imagecontainer_staff {
    display:inline-block;
    position: relative;
}

.imagecontainer_staff::before {
    position: absolute;
    top: -3%;
    left: -3%;
    width: 100%;
    height: 100%;
    border: 4px solid cornflowerblue;
    content: '';
}

.imagecontainer_staff::after {
    position: absolute;
    top: +3%;
    left: +3%;
    width: 100%;
    height: 100%;
    border: 4px solid black;
    content: '';
    z-index: -1;
}

<div class="row">
   <div class="col" style="text-align:center">
      <div class="imagecontainer_staff">
         <img src="https://image.shutterstock.com/image-vector/dogecoin-doge-against-full-moon-260nw-1909080796.jpg" class="mx-auto d-block"               width="200" height="300" alt="Dodi Haug">
      </div>
  </div>
</div>

Could you please choose it accepted as accepted answer since it solved your problem, you are welcome :) — Evren, May 26 '21 at 19:55

Force absolute positioned div "behind" relative positioned div

1 Answers1