div绝对定位引起的底部div位置问题_html/css

div绝对定位引起的底部div位置问题_html/css_WEB-ITnose

WBOY

发布： 2016-06-21 09:37:59

原创

1651 人浏览过

<!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=gb2312" /><title>无标题文档</title></head><body><div style="margin-left:auto; margin-right:auto; width:300px; background-color:#003399;"><div style="width:4000px;"><div style="float:left; width:260px; background:#CC0000; height:4000px; position:absolute;"></div></div><div style="clear:both;"> </div></div><div style="clear:both;margin-left:auto; margin-right:auto; width:800px; height:80px; background-color:#009900;">底部竟然不在底部，而是在中间位置</div></body></html>

登录后复制

底部的div没有出现在底部，而是中间位置。有什么办法解决。因为其中有个层需要用到绝对定位，如果把绝对定位去掉就出现在底部

回复讨论(解决方案)

底部竟然不在底部，而是在中间位置

IE6之外的所有浏览器都支持
ie6你使用js处理

<!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=gb2312" /><title>无标题文档</title></head><body><div style="margin-left:auto; margin-right:auto; width:300px; background-color:#003399;"><div style="width:4000px;"><div style="float:left; width:260px; background:#CC0000; height:4000px; position:absolute;"></div><!--这个有什么意义么，把这个去掉就好--></div><div style="clear:both;"> </div></div><div style="clear:both;margin-left:auto; margin-right:auto; width:800px; height:80px; background-color:#009900;">底部竟然不在底部，而是在中间位置</div></body></html>

登录后复制

HTML code

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

position:absolute这个去掉就好了

使用绝对定位就是会出现这个问题，我之前的做法是用js处理的，js获得底部以上div的高度，然后给底部块设置margin-top

恩~~绝对定位的元素不占据页面位置。
单从现在的代码来看，看不出为什么要使用绝对定位。
并且既然用了绝对，为什么又要用浮动和清除浮动，这和绝对定位同时使用是没有效果的。
如果要移位又要占据位置的话，可以考虑用相对定位。