Multiple z-index elements

Question

I' am doing a project and I have a little issue with z-index property.

Here is my code:

(HTML)

 <div class="outer_obw">
  <div class="obw1">
    <div class="box" id="blue_box">
      <div id="inn_blue" class="inner_box"><p>Box1</p></div>
    </div>
  </div>

  <div class="main_box_content">
    <div class="back_box">
      <div class="main_box"> 

        <p id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

      </div>
    </div>

    <div class="obw3">
        <div class="box" id="green_box">
          <div id="inn_green" class="inner_box"><p>Box2</p></div>
        </div>
      </div>
  </div>
</div>

(CSS)

.outer_obw {
   width: 78.5%;
   margin: 0 auto;
}
.obw1 {    
   min-height: 80px;
}
.obw3 {
   min-height: 80px;
   margin-top: -40px;
}
.box {
   width: 25.25%;
   min-height: 80px;
   cursor:pointer;  
   position: relative;
}
.inner_box {
   height: 68px;
   margin: -10.5px 6px;
   text-align: center;
   position: relative; 
}
#inn_blue {
   background-color: #fff;
   z-index: 5;
}
#inn_green {
   background-color: #fff;
   z-index: 5;
}
#blue_box {
   background-color: blue;
   float: left; 
   z-index: 1;
}
#green_box {
   background-color: green;
   float: right;
}
.main_box_content {
   display: table;
   width: 78.5%;
   position: absolute;
   margin-top: -40px;
}
.back_box {
   display: table;
   background-color: blue;
   width: 65%;
   margin: 0 17%;
   position: relative;
   z-index: 3;
}
.main_box {
   display: table;
   background-color: #f1f1f1;
   margin: 6px;
   padding: 0.5% 3%;
   position: relative;
   z-index: 10;
}

Here is all code and visualization.

I intended to achieve such an effect:

All what I need to do is insert inn_blue and inn_green (white fields of box1 and box2) between main_box (gray field with a text) and back_box (red background of the main box.

I don't know what I'm doing wrong. Z-index of the main_box should be greater than z-index of inn_blue/inn_green and z-index of the inn_blue/inn_green should be greater then back_box.

And so it is in my code, but the effect is not what I expected...

So the question is what am I doing wrong?

Answer 1

There are so many layers of complexity in your example. Instead, let's use the natural layers to our advantage and position with absolute and minimal markup.

The basics

Start off with a wrapper to contain your three boxes:

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

The wrapper will be position: relative and its three children will be positioned with position: absolute and top / right / bottom / left. In order to allow a flexible size that resizes in proportion, we can make use of the viewport width (vw) unit for both the width and the height. Each child div is given a percentage height.

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
}
.wrapper div {
  position: absolute;
  height: 25%;
  width: 20%;
}
.wrapper .one {
  top: 16px;
  left: 16px;
  background: blue;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: red;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
  background: green;
}

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

That gives us this:

Layer the main box

Now we want the red square to overlap both the blue and green squares. All we have to do is move the red <div> below them in the markup. The last element in the markup will overlap the elements before it naturally.

<div class="wrapper">
  <div class="one"></div>
  <div class="three"></div>
  <div class="two"></div><!-- move it one line down -->
</div>

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
}
.wrapper div {
  position: absolute;
  height: 25%;
  width: 20%;
}
.wrapper .one {
  top: 16px;
  left: 16px;
  background: blue;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: red;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
  background: green;
}

<div class="wrapper">
  <div class="one"></div>
  <div class="three"></div>
  <div class="two"></div><!-- move it one line down -->
</div>

Now we have the correct layers:

Add the border layers

In order to reduce complexity, we can create the box borders with :before pseudo elements. These will create the extra elements we need to create the overlapping borders.

Give each child div a :before element and background color like below:

.wrapper div:before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: -1;
}
.one:before {
  background: blue;
}
.two:before {
  background: red;
}
.three:before {
  background: green;
}

The -1 z-index will ensure that they are overlapped by the div backgrounds and the -6px position on all sides pulls them outside by 6px to give us a 6px border.

The final product

We add z-index: 1 to the wrapper, so that it wont overlap our border pseudo elements. box-sizing: border-box is used so that the padding is incorporated into the widths and heights.

Example 1

Limitation of this example: We cannot use overflow to hide excessive text on the main box, as it will cut off our border or cause a scroll bar to always be present..

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
  max-width: 772px;
  max-height: 579px;
  min-width: 390px;
  min-height: 292px;
  z-index: 1;
}
.wrapper div {
  position: absolute;
  box-sizing: border-box;
  background: #FFF;
  height: 25%;
  width: 20%;
  text-align: center;
  padding: 10px;
}
.wrapper div:before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: -1;
}
.one:before {
  background: blue;
}
.two:before {
  background: red;
}
.three:before {
  background: green;
}
.wrapper .one {
  top: 16px;
  left: 16px;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: #EEE;
  text-align: left;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
}

<div class="wrapper">
  <div class="one">Box1</div>
  <div class="three">Box3</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

Example 2

Slightly less elegant, the main box border is positioned relative to the wrapper itself, we can use overflow in this example to cut off or scroll excessive text.

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
  max-width: 772px;
  max-height: 579px;
  min-width: 390px;
  min-height: 292px;
  z-index: 1;
}
.wrapper div {
  position: absolute;
  box-sizing: border-box;
  background: #FFF;
  height: 25%;
  width: 20%;
  text-align: center;
  padding: 10px;
}
.wrapper:after {
  content: '';
  position: absolute;
  margin: -23% 0 0 -31%;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  height: calc(60% + 12px);
  width: calc(62% + 12px);
  background: #F00;
  z-index: -1;
}
.wrapper div:before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: -1;
}
.one:before {
  background: blue;
}
.three:before {
  background: green;
}
.wrapper .one {
  top: 16px;
  left: 16px;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: #EEE;
  text-align: left;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
}

<div class="wrapper">
  <div class="one">Box1</div>
  <div class="three">Box3</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>