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

Answer 3

Obligatory "I see you want to solve this by solution A. Solution A is bad. Here is solution B instead."

In short, I would recommend:

1. Pseudo elements:

   A. .my-div searched-element:nth-of-type(1) (i.e. searched-element would be p or h1 or div)

   B. :first-child

   C. :first-of-type

   D. :last-child

2. margin-top: -10px such that the child will be moved up

   And the real solution I would recommend is using the negative top margin of the child with some variants of the :first-child pseudo classes.

For my case specifically, I actually found it easier to switch my borders from border-top to border-bottom on all of the child divs and then use :last-child within that scope.