CODEWITHSUNDEEP
htmlcss
KodeFor.Me
KodeFor.Me

Reputation: 13511

:before element in back of parent element

I try to implement the following effect by using the :before but I have problem with the z-index.

enter image description here

My code is like this:

.container {
  background : #FFF;
}

.item {
  background-position : 50% 50%;
  background-repeat : no-repeat;
  background-size: cover;
  width : 200px;
  height :200px;
  position : relative;
}

.item:before {
  content  : '';
  position : absolute;
  width    : 100%;
  height   : 100%;
  right    : -20px;
  bottom   : -20px;
  border   : 2px solid #0AF;
  z-index  : -1;
}
<div class="container">
  <div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>

The problem now, is that the container seems to cover the :before element.

For the moment I don't mind about the "MIDDLE AGE" item.

How can I overcome this issue ?

Upvotes: 0

Views: 68

Answers (2)

cFreed
cFreed

Reputation: 4474

Try this:

.container {
  background : #FFF;
  position: relative;
  float: left;
}

.item {
  background-position : 50% 50%;
  background-repeat : no-repeat;
  background-size: cover;
  width : 200px;
  height :200px;
  position : relative;
}

.item-border {
  content  : '';
  position : absolute;
  width    : 100%;
  height   : 100%;
  right    : -20px;
  bottom   : -20px;
  border   : 2px solid #0AF;
  z-index  : -1;
}
<div class="container">
  <div class="item-border"></div>
  <div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=200%C3%97200&amp;w=200&amp;h=200')"></div>
</div>

Upvotes: 2

Pim
Pim

Reputation: 728

Add the following CSS styles:

.container {
  position: relative;
  z-index: 1;
}

Code in JSfiddle: https://jsfiddle.net/5cq5576k/

Upvotes: 2

Related Questions