daniel Crabbe daniel Crabbe - 1 year ago 94
CSS Question

stop child covering parent outline?

Due to some elements being inside a slideshow i'm using outline with negative offset instead of border.

However the child elements are covering the outline but i want the border over them. I'm using it to frame the content.


.parent {
position:relative; outline: green 3px solid;
.child {position:relative; top:26px; background-color:yellow;

Answer Source

You could use :after pseudo-element for outline and add position: absolute.

.parent {
  position: relative;
  background-color: pink;
  overflow: hidden;
.parent:after {
  width: 100%;
  height: 100%;
  content: '';
  outline: green 3px solid;
  outline-offset: -3px;
  position: absolute;
  top: 0;
  left: 0;
.child {
  position: relative;
  top: 23px;
  background-color: yellow;
  display: inline;
p {
  margin: 0;
<div class="parent">
  <div class="child">lorem ipsum doler sit amet</div>
  <p>text here</p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download