Jump to content

div order vewing.


applecoder
 Share

Recommended Posts

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...