l2oBiN Posted June 16, 2011 Share Posted June 16, 2011 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; } Link to comment Share on other sites More sharing options...
Ingolme Posted June 16, 2011 Share Posted June 16, 2011 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 More sharing options...
l2oBiN Posted June 16, 2011 Author Share Posted June 16, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.