CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
一、普通流
除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
二、定位
1、相对定位
被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
2、绝对定位
相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。
绝对定位的框脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
3、固定定位
相对于浏览器窗口,其余的特点类似于绝对定位。
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性
描述
position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow设置当元素的内容溢出其区域时发生的事情。
clip设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align设置元素的垂直对齐方式。
z-index设置元素的堆叠顺序。