CSS设计指南笔记:定位篇

时间:2019-01-11
本文章向大家介绍CSS设计指南笔记:定位篇,主要包括CSS设计指南笔记:定位篇使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

position 属性有4 个值:static、relative、absolute、fixed,默认值为static

静态定位:static

在静态定位的情况下,每个元素都处在常规文档流中。

相对定位:relative

相对的是它原来在文档流中的位置(或者是默认位置)。可以用top 、right 、bottom、left属性来改变它的位置。

除了自身相对于原始位置挪动了之外,页面没有发生任何变化,这个元素原来占据的空间没有动,其他元素也没有动。

绝对定位:absolute

绝对定位会把元素彻底从文档流中拿出来。元素之前占据的空间被“回收”。绝对定位的元素会完全脱离常规文档流,他现在是相对于顶级元素body在定位。

绝对定位元素的定位上下文是body,所以在页面滚动的时候,为了维护与body元素的相对位置关系,它会相应的移动。

固定定位:fixed

固定定位元素的定位上下文是视口(浏览器窗口或手持设备的屏幕),因此它不会随页面滚动而滚动。

事实上,只要把元素的外边距和内边距设定好,多数情况下只用静态定位就足以实现页面布局了。很多刚开始接触CSS 的初学者都会错误地设定position 属性,最终才发现从文档流中挪出来的这些元素一点也不好控制。因此,除非真需要那么做,否则不要轻易修改元素默认的position 属性。