tinfanide Posted March 25, 2011 Share Posted March 25, 2011 My question is:When I set absolute position of an object with right:, it bounces on the browser being resized;When I set it with left:, it keeps itself in the designated position even if the browser is being resized.Can anyone explain why it happens? It seems to me that CSS favours left against right.We have to consider positioning an object from left to right, instead of from right to left to avoid the bouncing situation.Sometimes I find it difficult to position an object always from the left. It is convenient to position something from right, not from left.Thank you for any reply to my question. Take a look at the example below if you like. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#apDiv1 { position:absolute; width:500px; height:115px; z-index:1; background-color: #CCCCCC; top: 120px; left: 10px;}.div2 { position:absolute; width:500px; height:100px; background-color:#9F0; top:10px; right:100px;}</style></head><body><div id="apDiv1"> <pre>DIV1</pre></div><div class="div2">DIV2</div></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted March 25, 2011 Share Posted March 25, 2011 if you mean it keeps shifting over as you resize it's because the browser window is getting wider (by stretching the page out) and the elements are re-rendering to position themselves accordingly. When it's on the left, it's OK because the left side of the page is fine.Personally, you don't really need to be using positioning for laying out your page. That's what float is for, in conjunction with the box model. Link to comment Share on other sites More sharing options...
ShadowMage Posted March 25, 2011 Share Posted March 25, 2011 if you mean it keeps shifting over as you resize it's because the browser window is getting wider (by stretching the page out) and the elements are re-rendering to position themselves accordingly.To clarify, the actual body and html elements are resizing with the browser window. Since absolute positions itself relative to the nearest ancestor with position other than static (or body if one cannot be found) the position is relative to that ancestors boundaries. The right boundary of the body element is changing, and thus the position of the element adjusts to stay relative to that boundary. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.