rv20 Posted May 21, 2009 Share Posted May 21, 2009 I had a layout that worked well then added another div, turned out this added div overlapped a div under it causing the div under it to move over to the the left until this underneath divs right handside was aligned with the added divs left hand side. Can i force the underneath div back to it original position and hence overlap the added div? Is that the z-index or is z-index only for absolute positional divs? you might say adjust margins / padding but i want to know if i can have a div onto of another div.. Quote Link to comment Share on other sites More sharing options...
brown2005 Posted May 21, 2009 Share Posted May 21, 2009 can you show me what you mean? link? Quote Link to comment Share on other sites More sharing options...
bananababe Posted May 21, 2009 Share Posted May 21, 2009 z-index only works with absolute positioning. You could use absolute or relative positioning and then top/left to move one of your divs. Please post your code or link to your problem. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted May 31, 2009 Share Posted May 31, 2009 It sounds like your layout have some problems with its positioning. But to answer the question, yes you can have a division placed, just about anywhere you please. Thats acomplished by using floats, and/or relative and absolute positioning. The reason your new div overlaps the one underneath it, may be because you fogot to clear your floats, or because the divs where positioned, while the new div wasn't. Its difficult to assist you without seeing the code, and how it works live in a browser. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted May 31, 2009 Share Posted May 31, 2009 Note. Z-index is for positioned elements only, meaning any element with its position set to something else then static, (which is the default). Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 1, 2009 Share Posted June 1, 2009 Blueboden - you are incorrect in many ways. Forgetting to clear floats would not cause divs to overlap. Forgetting to clear floats would make the layout "jumbled" up, but would never overlap. The problem with your current code (through my experience) is that you have a div with position: absolute;. However, you did not specify a specific location for this div within its relatively positioned parent div. You need to have to specify (top: 0; left: 0;) or someother value. Without a specific location, the div would cause things to be pushed down as it is still in the flow of the content, but overlapping. It's hard to explain. Provide a link and the relavant css code for the div that's being overlapped and its relatively positioned parent. We are more than willing to help you debug the problem. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted June 3, 2009 Share Posted June 3, 2009 Blueboden - you are incorrect in many ways. Forgetting to clear floats would not cause divs to overlap. Forgetting to clear floats would make the layout "jumbled" up, but would never overlap. In many ways? How is that? I admit that the float part may be irrelevant to this case, i simply wrote it of the top of my head, without really remembering the circumstances. But floats can indeed overlap elements below, I.e. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>My first Website</title> <style type="text/css"> li { float: left; } ul { background: silver; margin: 0 0 0 0.5em; padding: 0; list-style-type: none; } #Basement { width: 500px; } #Content { background: gray; /* clear:both; */ } </style> </head> <body> <div id="Basement"> <ul> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> <li>Example Item</li> </ul> <div id="Content"> <h1>Example</h1> <p>Paragraph</p> </div> </div> </body> </html> I don't think this is supposed to happen. Nevertheless, adding a clear to the content division solves it. It is almost as if the parent of the li elements was completely ignored in FireFox. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 3, 2009 Share Posted June 3, 2009 Your example doesn't cause a true overlap. Maybe in FF but in IE only part of the div overlaps. A true overlap is when text overlaps another piece of text. Overlapping another div's background color isn't truly an overlap, as a div is nothing more than a division within the markup. To overlap "content" or actual text, you need to use absolute positioning. My previous post clearly states the solution. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted June 3, 2009 Share Posted June 3, 2009 Your example doesn't cause a true overlap. Maybe in FF but in IE only part of the div overlaps. A true overlap is when text overlaps another piece of text. Overlapping another div's background color isn't truly an overlap, as a div is nothing more than a division within the markup. That is a matter of defination. To overlap "content" or actual text, you need to use absolute positioning. My previous post clearly states the solution. Indeed. As well as my first post. So what is your point exactly? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.