CODEWITHSUNDEEP
htmlcssz-indexpseudo-element
terzi_matte
terzi_matte

Reputation: 175

z-index not work with pseudo-elements

UPDATE (sorry but i was trying to edit) the bookmark that i would is this: enter image description here

i was making a bookmark for a website, but when i have used 'z-index' it does not works. (see the image) :(

image

I have watched some posts about this problem on this website, and i tried to change the code, but it still not working.

this is the link of code: http://jsfiddle.net/c62yhxay/1/

or if you prefer: 

.fix {
  padding: 30px;
}
.box {
  border-bottom: 3px solid #bebebd;
  margin-bottom: 25px;
  background-color: #fff;
  box-shadow: 0px 0px 9px #D4D4D4;
  z-index: 10;
  position: relative;
}
.box>.row {
  border: 1px solid #000;
}
.box>.row .bookmark {
  position: relative;
  left: -20px;
  width: 110px;
  height: 32px;
  padding-left: 53px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
  z-index: 20;
}
.box>.row .bookmark:before {
  content: "";
  transform: rotate(40deg);
  width: 40px;
  height: 30px;
  top: 10px;
  left: -4px;
  z-index: 2;
  position: absolute;
}
.bookmark-blue {
  background-color: #5f7fc0;
}
.bookmark-blue:before {
  background-color: #5471AB;
}
.bookmark-red {
  background-color: #d44e4d;
}
.bookmark-red:before {
  background-color: #b5464d;
}
<div class="box">
  <div class="row">
    <div class="bookmark bookmark-red">bookmark1</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
  <div class="row">
    <div class="bookmark bookmark-blue">bookmark2</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
</div>

Upvotes: 1

Views: 187

Answers (2)

hmnzr
hmnzr

Reputation: 1430

Just remove z-index property from the .bookmark class

  .box>.row .bookmark {
  position: relative;
  left: -20px;
  width: 110px;
  height: 32px;
  padding-left: 53px;
  line-height: 32px;
  font-size: 12px;
  color: #fff;
}


.fix {
   padding:30px;
}
.box {
    border-bottom:3px solid #bebebd;
    margin-bottom:25px;
    background-color: #fff;
    box-shadow: 0px 0px 9px #D4D4D4;
    position:relative;
}
.box>.row {
    border:1px solid #000;
}
.box>.row .bookmark {
    position:relative;
    left:-20px;
    width: 110px;
    height: 32px;
    padding-left: 53px;
    line-height: 32px;
    font-size: 12px;
    color: #fff;
}
.box>.row .bookmark:before {
    content:"";
    transform: rotate(40deg);
    width: 40px;
    height: 30px;
    top: 10px;
    left: -4px;
    z-index: -1;
    position:absolute;
}
.bookmark-blue {
    background-color: #5f7fc0;
}
.bookmark-blue:before {
    background-color: #5471AB;
}
.bookmark-red {
    background-color: #d44e4d;
}
.bookmark-red:before  {
    background-color: #b5464d;
}
<div class="fix">                
<div class="box">
                    <div class="row">
                        <div class="bookmark bookmark-red">bookmark1</div>
                        <br><br><br><br><br><br><br><br><br>
                        <div class="clearfix"></div>
                    </div>
                    <div class="row">
                        <div class="bookmark bookmark-blue">bookmark2</div>
                        <br><br><br><br><br><br><br><br><br>
                    </div>
                </div>
                            </div>

Upvotes: 3

Heidar
Heidar

Reputation: 689

This issue because of the the pseudo elements are structures as children for the main element. You reach the same result by totally remove the z-index from .bookmark and set the z-index for the pseudo element to anything negative.

working fiddle : http://jsfiddle.net/c9vqjeww/1/

Upvotes: 1

Related Questions