[CSS]CSS Position 详解

时间 2019-12-06

标签 css position 详解栏目 CSS 繁體版

原文原文链接

一. CSS position 属性介绍

CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。html

二. position: static

static：没有定位，元素出如今正常的文档流中，忽略left，right，top，bottom和z-index。浏览器

因此对元素position属性设定static时，left属性不起做用，可是元素出如今正常的流中。spa

三. position: fixed

fixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，所以不占据空间，可能会和其余元素发生重叠。设计

窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。htm

四. position: relative

reletive：元素相对其本身正常位置定位，元素在正常的文档流中。图片

没有设置left和top时的正常位置。文档

设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。可是元素预留的空间保持正常流动，也就是不会对其余元素产生影响。it

五. position: absolute

absolute：元素绝对定位，相对于static定位之外的第一个父元素，元素脱离文档流。io

因此会找到static定位之外的第一个父元素，由于span的父元素content和container都没有设置position属性，默认为static，找到的第一个父元素就为html<body>，相对于<body>向左移动100px。class

若是对content或container设置position属性为relative，absolute或fixed，span会相对于content或container来定位。
如下是三个例子，

span元素的第一个position属性不为static的父元素是content，因此相对于content向左移动10px。

当content属性设置为fixed时，span元素相对于content向左移动10px。

span元素第一个position属性不为static的父元素是container，因此相对于container向左移动10px。

六. 总结

position: static，元素出如今正常的流中，没法经过left，right，top和bottom设置元素定位。
position: fixed，元素脱离文档流，相对于浏览器窗口定位不变。
position: relative，元素出如今正常的流中，相对于其正常位置定位。
position: absolute，元素脱离文档流，相对于static之外的第一个父元素定位。

理解了position的属性，能够更好的设计页面和实现页面。