绝对定位相关注意点

绝对定位注意点:

绝对定位的元素是脱离标准流的, 不会占用标准流中的位置

由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点

相对于body定位会随着页面的滚动而滚动

一个绝对定位的元素会忽略祖先元素的padding


绝对定位参考点:

默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点


绝对定位水平居中

1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中

2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,298评论 1 91
  • (备注:凡是利用圆括号括起来的一般就是注释或者英文解释,用webstorm写程序时一定要注意字符一定要在英文状态下...
    低调桀骜红烧肉阅读 780评论 0 0
  • CSS可以分为4部分 1. CSS样式 1. 文字属性 格式:非连写---> font-family:设置文字的字...
    白的吓人阅读 297评论 0 0
  • 当前,大数据、云计算等互联网前沿技术迅猛发展,智能手机充分普及,移动互联网快速兴起,推动全社会正在发生深刻变革,从...
    李汶燕阅读 271评论 0 0
  • 落霞峰顶坐着一个人,一个长着一头白发的少年,吹着长箫看着那逝去的夕阳,也看看落霞峰下就过的荡魂河,不时抚摸身边的一...
    南疆彝人阅读 121评论 0 0
  • 杯子,空的, 静静待在桌上, 那人却遐想连篇。 杯子,装上了酒,成了酒杯。 觥筹交错,干杯不醉, 谁能在乎你的胃?...
    诗无名阅读 39评论 2 3
  • 星巴克从无到有,经历的过程是一个,让人惊心动魄的过程,从他仅凭着一腔热血和痴迷,就投入到了一个完全陌生的咖啡的事业...
    满眼都是豆豆阅读 127评论 1 0