Z-index on borders

Question

I have been searching around for a way to add z-index to borders but can't seem to find one so I thought I'd ask here.

Say I have a div with a parent div. The parent has a border and I want that border to overlap the child div but I don't want the parent to overlap it.

Answer 1

You cannot do that with a border.

Interestingly though, you can do it with an outline

* {  box-sizing: border-box;  }    .parent {  width: 200px;  height: 200px;  margin: 25px auto;  position: relative;  background: #bada55;  border:12px solid #663399;  outline: 12px solid red;  padding:25px   }    .child {  width: 220px;  height: 100px;  background: lightblue;  }

<div class="parent">    <div class="child"></div>  </div>

Other Options

Using pseudo-elements

1. Pseudo-element with border

Requires some additional transforms to nudge into place.

* {    box-sizing: border-box;  }  .parent {    width: 200px;    height: 200px;    margin: 25px auto;    position: relative;    background: #bada55;    padding: 25px;  }  .child {    width: 220px;    height: 100px;    background: lightblue;  }  .absolute::after {    content: '';    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    width: 100%;    height: 100%;    border: 12px solid red;  }

<div class="parent absolute">    <div class="child"></div>  </div>

2. Pseudo-element with box-shadow

* {    box-sizing: border-box;  }  .parent {    width: 200px;    height: 200px;    margin: 25px auto;    position: relative;    background: #bada55;    padding: 25px;  }  .child {    width: 220px;    height: 100px;    background: lightblue;  }  .shadow::after {    content: '';    position: absolute;    top: 0%;    left: 0%;    width: 100%;    height: 100%;    box-shadow: 0 0 0 12px red;  }

<div class="parent shadow">    <div class="child"></div>  </div>

Answer 2

style border on pseudo element

1. for higher z-index use pseudo element eg. ::before
2. to be able to interact with div under - use pointer-events: none; on the pseudo element (see spec)

important part of code:

.parent {     position: relative;     ... } .parent::before {     pointer-events: none;     position: absolute;     border: 1px solid #000;     ... } 

full example: https://codepen.io/Michal-Miky-Jankovsky/pen/QoXbLz