CODEWITHSUNDEEP
htmlcss
acctman
acctman

Reputation: 4349

z-index and position for multiple div

I have been messing with z-index and position properties trying to achieve the div box setup below. what's position should I be using and the max z-index readable by all devices including mobile should be 99 right? my z-index seem to be way off.

<div style="width: 990px; border: 1px solid;">
  <div style="z-index: 1; border: 1px solid; background: #000; position:absolute;">
    Top div 1
  </div>
  <div style="z-index: -2; border: 1px solid; background: #000; position:absolute;">
    back div 2
  </div>
  <div style="z-index: -1; border: 1px solid; background: #000; position:absolute;">
    back div 3
  </div>
  <div style="z-index: 2; border: 1px solid; background: #000; position:absolute;">
    text div 4
  </div>
  <div style="z-index: 3; border: 1px solid; background: #000; position:absolute;">
    Top div 5
  </div>
  <div style="z-index: -1; border: 1px solid; background: #000; position:absolute;">
    Top div 6
  </div>
</div>

enter image description here

Upvotes: 1

Views: 2245

Answers (1)

Guitosk
Guitosk

Reputation: 41

The very back ones and textdiv, could be floating divs, to left, left and right respectively, adjusting only their margins.

The ones that should be over the others (top, back and top) could be wrapped in a position:absolute div and be all position:relative to it. There, again, should play with their margins and set a high z-index, like z-index:1000 to assure you they should be on top.

This way is more simple than trying to deal with them separately.

Hope this helps. Cheers

Upvotes: 1

Related Questions