摘要：定位的起始位置为此元素原先在档流的位置。忽略和从父元素继承该属性的值以上的和可以使得元素脱离文档流。绝对定位脱离档流的布局，遗留下来的空间由后的元素填充。默认定位表示此元素为默认定位式。
Position（定位）
position可以取五个值
| 参数 | 描述 |
|---|---|
| absolute | 绝对定位；脱离⽂档流的布局，遗留下来的空间由后⾯的元素填充。定位的起始位置为最近的⽗元素(postion不为static)，否则为Body⽂档本身。 |
| relative | 相对定位；不脱离⽂档流的布局，只改变⾃身的位置，在⽂档流原先的位置遗留空⽩区域。定位的起始位置为此元素原先在⽂档流的位置。 |
| fixed | 固定定位；类似于absolute，但不随着滚动条的移动⽽改变位置。 |
| static | 默认值；默认布局。 忽略 top, bottom, left, right和z-index |
| inherit | 从父元素继承该属性的值 |
以上的absolute 和fixed 可以使得元素脱离文档流。
position属性只是定义元素的定位方式，要想此元素能按照希望的位置显示，就需要使⽤下⾯的属性(position:static不⽀持这些)：
left ： 表示向元素的左边插⼊多少像素，使元素向右移动多少像素。
right ：表示向元素的右边插⼊多少像素，使元素向左移动多少像
素。
top ：表示向元素的上⽅插⼊多少像素，使元素向下移动多少像素。
bottom ：表示向元素的下⽅插⼊多少像素，使元素向上移动多少像
素。
上⾯属性的值可以为负，单位：px 。绝对定位(absolute)
脱离⽂档流的布局，遗留下来的空间由后⾯的元素填充。相对定位(relative)定位的起始位置为最近的⽗元素(postion不为static)，否则为Body⽂档
本身。
不脱离⽂档流的布局，只改变⾃身的位置，在⽂档流原先的位置遗留空⽩区域。固定定位(fix)定位的起始位置为此元素原先在⽂档流的位置。
类似于absolute，但不随着滚动条的移动⽽改变位置。默认定位(static)
表示此元素为默认定位⽅式。继承(inherit)
从父元素继承定位⽅式。
1.父容器的position属性为relative
由上图可知，div继承了父类的position属性（relative）;这时候div-a没有脱离文档流，只是相对于原来的位置向右边偏移了，留下一个空位。参考绝对定位的图形。
注意：此时的父容器是没有设置宽高的，（见图），我们可以看见父容器宽度为100%，高度自适应。
下面我们把父容器的定位改成absolute
2.父容器的position属性为absolute
可以看出，div-a脱离了文档流，相对于父容器向右偏移了350px，后面的div-b占据了他的位置.
注意：此时我们可以发现，父容器宽和高都是自适应的。
然后我们在对两种情况进行研究。
父容器postion属性为static
父容器宽度为100%，高度自适应。
父容器的position属性为fixed
父容器宽高均自适应
从这里面。我们不仅可以看出inherit的特性。而且我们还发现了以下规则：
重点
在父容器没有设置宽高的时候，
当父容器定位为relative和static时，及没有脱离文档流时，宽度为100%
当父容器定位为absolute和fixed时，及脱离文档流时，宽高为自适应
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114475.html
摘要：注意当该固定元素的祖先元素的属性非时，容器由浏览器窗口改为该祖先元素粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。理论上来说，全部 position 的取值有8个 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
摘要：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。相对定位，相对于自己的初始位置，不脱离文档流。 有过css开发经验的同学，对于position这个属性一定不会陌生，然而这个熟悉的属性确是面试题中的常客，也就说明了该属性在css的世界是有一定的江湖地位的，那么我们就来详细的说说position这个属性。 在w3school中是这样解释posi...
摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。 一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...
摘要：三生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。，元素脱离文档流，相对于以外的第一个父元素定位。 一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed...
摘要：脱离了文档流不为元素预留空间，通过指定元素相对于最近的非定位祖先元素的偏移，来确定元素位置。在所有情况下即便被定位元素为时，该元素定位均不对后续元素造成影响。否则其行为与相对定位相同。生效规则须指定或四个阈值其中之一，才可使粘性定位生效。CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。 常见语法 stat...
阅读 2829·2021-09-28 09:36
阅读 3912·2021-09-22 15:52
阅读 3611·2021-09-06 15:00
阅读 1918·2021-09-02 15:40
阅读 2781·2021-09-02 15:15
阅读 3401·2021-08-17 10:15
阅读 2767·2019-08-30 15:53
阅读 2044·2019-08-29 18:39
