1

I have this nice post-it with pure CSS. I've implemented it in this jsfiddle. Looks all very nice!

However, in my situation I have also a div with css as follows:

div {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-color: green;
}

With that div in place, the css effect used on the post-it is messed up. It seems to be an issue with the z-index! However, I've fiddled with the z-indexes, but I cannot fix it. Checkout this jsfiddle which shows the issue. Is there anyway the postit can be fixed ?

3
  • Could you please define your 'issue'
    – George
    Mar 19, 2014 at 9:16
  • why here two jsfiddle.? Mar 19, 2014 at 9:19
  • I've added an explanation. One jsfiddle is without the 'div', in which case the post-it looks just fine. The second one has this div, which has an effect on the post-it styling Mar 19, 2014 at 9:20

5 Answers 5

4

According to your html structure

<div></div>
<div id="box">
       Text Here
</div>

You have applied CSS to div

div {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: blue;
   z-index: -3;
}

And you are applying seperate CSS to "#box" div along with pseudo properties.

But as you define z-index for div, it gets applied to all div elements.

Hence, the z-index property for :before and :after alos get applied along with same property as mentioned for all div elements.

So to overcome this you need to apply some class or id to parent div

Please refer to the fiddle for the same.

Or apply z-index: auto in #box div

Please refer to another fiddle for the same.

1
  • @Jeanluca Scaljeri, are you fine with explanation?
    – Mazzu
    Mar 19, 2014 at 9:32
3

You need to reset the z-index on your box div. So the z-index statements on the pseudo selectors apply correctly. Add the following line:

#box {
    [...]
    z-index: auto;
}

As the others anwers mention this. Your general div style conflicts with the z-index statements at :before and :after. But I guess you have a reason for this.

2

Your style for 'div' is getting applied to both the Divs' Use something like this:

<div id="myDiv"></div>
<div id="box">
   Text Here
</div>

#myDiv {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: blue;
 z-index: -3;
}

Hope this helps.

0
2

You didn't give you div a classname so all your div's will get that css. This will work

http://jsfiddle.net/g29ns/4/

    <div class="givethisdivaclass"></div>
<div id="box">
       Text Here
</div>


div.givethisdivaclass {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: blue;
   z-index: -3;
}

#box{
    width:300px;
    height:300px;
    margin:50px auto;
    position:relative;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

#box:after{
    -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
    position:absolute;
    content:'';
    background:transparent;
    bottom:10px;
    right:9px;
    width:70%;
    height:70%;
    -webkit-transform: rotate(5deg) skew(10deg);
    z-index: -2;
}

#box:before{
    z-index:-1;
    -webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
    position:absolute;
    content:'';
    background:transparent;
    bottom:46px;
    right:41px;
    width:50%;
    height:50%;
    -webkit-transform: rotate(20deg) skew(45deg);
}
1
 <!-- gave a unique id to the div to avoid the issue -->
<div id="boxNew"> </div> 

Like this,

#boxNew {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: blue;
   z-index: -3;
}

See demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.