z-index:1; on :after not working

Question

I've seen in previous answers that :after will go behind a its parent when the child is set to:

z-index:-1;

...and the parent is set with no z-index so the -1 defines the order.

I've done this yet it still remains above the parent in the stack (as represented by the green bar over the black square.) How can I make the green bar move to the bottom of the stack? Thanks.

http://jsbin.com/xoguzezupego/1/edit

This question has been asked before, I'll post the link once I find that. However in short, to answer *why*: Because CSS transform establishes a new stacking context, therefore the positioned element is not able to go behind of its parent. There are workarounds though. — Hashem Qolami, Oct 10 '14 at 22:21
[Here](http://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate) - just googled the keywords `css transform stacking context`. Also [here](http://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context) is a good list of properties which create stacking context. — Hashem Qolami, Oct 10 '14 at 22:23

score 0 · Answer 1 · answered Oct 11 '14 at 00:01

The problem is that the two pseudo-elements are stacked as if they were child elements of .left-table, and as such, they form a stacking context that is considered to be part of the stacking order of their parent block, that is, .left-table.

You need to create a background masking element that is a child of .left-table and then positioning it absolutely within .left-table.

When you do this, then the z-index can be used to stack the green rectangle behind the red and black elements.

Read more about how stacking order works: http://www.w3.org/TR/CSS21/zindex.html#stacking-defs

Note: It was not clear to me what the transforms were trying to do so I left them out since they were not relevant to the issue of the stacking order.

.left_table{
  position:absolute;
  top:0px;
  left: 0;
  width:250px;
  height:175px;
 }
.inner-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
}
.left_table:before{
  content:'';
  position:absolute;
  background-color: red;
  bottom:-28px;
  width:250px;
  height:30px;
 }

.left_table:after{
  content:'';
  position:absolute;
  background-color: green;
  right:30px;
  width:15px;
  height:250px;
  z-index: -1;
}

<div class="left_table">
<div class="inner-mask"></div>
</div>

z-index:1; on :after not working

1 Answers1