[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5670
  • Last Modified:

Absolute Positioning & Z-Order

I'm trying to create a framework for a design that has hidden tabs that will scroll-out on rollover.  I've got the following HTML:

<div style="width:600px; height: 400px;background-color: #CCCCCC; margin: 0 auto;" >
      <div style="position: relative;width: 400px; background-color:#99CC99; padding: 20px; z-index: 0">
            <div style="position: relative;" id="box1">
            <p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, ullamco laboris nisi in reprehenderit in voluptate. Sed do eiusmod tempor incididunt mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit, cupidatat non proident. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
            <p>Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore consectetur adipisicing elit, qui officia deserunt. Sunt in culpa. In reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
            <p>Ut labore et dolore magna aliqua. Excepteur sint occaecat sunt in culpa consectetur adipisicing elit. Eu fugiat nulla pariatur. Ut enim ad minim veniam, qui officia deserunt sed do eiusmod tempor incididunt.</p>
            <p>Quis nostrud exercitation sunt in` culpa ut labore et dolore magna aliqua. Duis aute irure dolor cupidatat non proident, excepteur sint occaecat. In reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.</p>
            </div>
            <div style="position:absolute; top: 0px; left: 360px; z-index: -1" id="box2">
                  <div style="width: 200px; height: 80px; background-color:#CCCC99; ">Duis aute irure dolor cupidatat non proident</div>
            </div>
            <div style="position:absolute; top: 50px; left: 340px; z-index: -1" id="box3">
                  <div style="width: 200px; height: 100px; background-color:#996699">Quis nostrud exercitation sunt in culpa</div>
            </div>      
      </div>

</div>

Which works fine in Firefox, in that Box1 appears in front of Box2 and Box3 when rendered, but in IE Box2 and Box3 are still appearing above Box1.  Any ideas why, and how I can fix this without changing the basic structure?
0
equentin
Asked:
equentin
1 Solution
 
Eternal_StudentCommented:
Try this:

<div style="width:600px; height: 400px;background-color: #CCCCCC; margin: 0 auto; position: relative" >

      <div style="position: absolute;width: 400px; background-color:#99CC99; padding: 20px; z-index: 12">
            <p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, ullamco laboris nisi in reprehenderit in voluptate. Sed do eiusmod tempor incididunt mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit, cupidatat non proident. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p>
            <p>Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore consectetur adipisicing elit, qui officia deserunt. Sunt in culpa. In reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
            <p>Ut labore et dolore magna aliqua. Excepteur sint occaecat sunt in culpa consectetur adipisicing elit. Eu fugiat nulla pariatur. Ut enim ad minim veniam, qui officia deserunt sed do eiusmod tempor incididunt.</p>
            <p>Quis nostrud exercitation sunt in` culpa ut labore et dolore magna aliqua. Duis aute irure dolor cupidatat non proident, excepteur sint occaecat. In reprehenderit in voluptate. Ut aliquip ex ea commodo consequat.</p>                  
      </div>
      
      <div style="position:absolute; top: 0px; left: 360px; z-index: 2" id="box2">
            <div style="width: 200px; height: 80px; background-color:#CCCC99; ">Duis aute irure dolor cupidatat non proident</div>
      </div>
      
      <div style="position:absolute; top: 50px; left: 340px; z-index: 3" id="box3">
            <div style="width: 200px; height: 100px; background-color:#996699">Quis nostrud exercitation sunt in culpa</div>
      </div>    
        
</div>
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now