applecoder Posted February 4, 2008 Share Posted February 4, 2008 Greetings.I am a web design teacher, and I have not run into this, but in teaching the students about css there was a problem we ran into...see hereI have created a div container and inside that another div bx1inside that div are 4 divs, but these divs are not acing like they should.I want the orange and box(divs) in front of the blue and yellow (divs) but we are not able to figure this out.I have moved the orange from the bottom to the top, and it still is behind the blue and yellow.and what is up with the red one?AC Link to comment Share on other sites More sharing options...
applecoder Posted February 4, 2008 Author Share Posted February 4, 2008 I have played with the z-index on all div tags, as you can see, I have tinkered with position, display, and a few other css elements, but to no avail.just need understanding of order and why it is not working like one would think it would.the orange and red should be on top of the blue and yellow correct? AC Link to comment Share on other sites More sharing options...
S@m Posted February 4, 2008 Share Posted February 4, 2008 For z-index, you need either position:absolute; or position:relative; in order to work. So...I would put a position:relative; on bx4 and bx5. Should do the trick. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lesson 1: Begging HTML and Imbedded CSS</title> <meta name="generator" content="BBEdit 8.5" /> <style type="text/css">body {margin:0;padding:0;} #container{margin:0 auto;padding:5px 0 0 0;width:600px; height:500px;background-color:black;} #bx1 {width:580px;height:480px;background-color:green;margin: 0 auto;} #bx2 {margin:-90px 0 0 10px;padding:0;width:200px;height:460px;background-color:blue;} #bx3 {width:200px;height:460px;background-color: yellow;float:right;margin:-460px 10px 0 0;}#bx4 {width:580px;height:100px;background-color:orange;position:relative;z-index:1;} #bx5 {width:580px;height:100px;background-color:red;position:relative;z-index:2;margin:-100px 0 0 0;}#clear {clear:both;}</style> </head><body><div id="container"> <div id="bx1"> <div id="bx4"></div> <div id="bx2"></div> <div id="bx3"></div> <div id="clear"></div> <div id="bx5"></div> </div></div></body></html> Link to comment Share on other sites More sharing options...
applecoder Posted February 4, 2008 Author Share Posted February 4, 2008 s@mThanks.I knew there was something missing...peaceAC Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.