Jump to content

problems with z-index


l2oBiN
 Share

Recommended Posts

I would like to have the log element float above the other elements, and positioned relatively to the wrapper. The problem is that although I can make the element come in front. The other elements within the wrapper seem to recognise and align as if there the logo element was still at z-index :0; why?

<html><head><title>m2</title><link rel="stylesheet" type="text/css" href="main.css" /></head><body>	<!-- Begin Wrapper -->	<div id="wrapper">		<div id="logo">		logo		</div>		<div id="header">		header		</div>		<div id="navigation">		navigation		</div>		<div id="content">		content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content  				</div>		<div id="footer">		footer  		</div>	</div>	<!-- End Wrapper --></body></html>

*{padding: 0;margin: 0;}body{background-color: black;}#wrapper{margin: 0 auto;width: 960px;height: 600px;background-color: orange;}	#logo{	z-index: 1;	float: none;	position: relative; top: 120px; left: 120px; 	width: 100px;	height: 100px;	background: green;	}	#header{	float: left;	width: 960px;	height: 100px;	background: #BD9C8C;	}	#navigation{	float: left;	width: 960px;	height: 50px;	background-color: yellow;	}	#content{	float: left;	width: 960px;	height: 100%;	background-color: #F2F2E6;	}	#footer{	float: left;	width: 960px;	height: 50px;	background: #E7DBD5;	background-color: white;	}

Edited by l2oBin
Link to comment
Share on other sites

Relative positioning will move an element but still reserve the space of its original position. You'll need to use absolute positionint in order to let elements occupy its previously occupied space.If the parent element has a relative position then the absolute position coordinates will be relative to the top left corner of the parent.

Link to comment
Share on other sites

Relative positioning will move an element but still reserve the space of its original position. You'll need to use absolute positionint in order to let elements occupy its previously occupied space.If the parent element has a relative position then the absolute position coordinates will be relative to the top left corner of the parent.
Thank you =P
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...