position属性

position属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

• static

• relative

• fixed

• absolute

• sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

1.静态定位static（略）

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

2.相对定位relative***

在移动的时候，是根据它原来的位置来说的

特点：

1.相对原来的位置移动

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

原来位置还在

3.绝对定位absolute***

在移动元素的时候，是相对于它祖先元素来说的

特点： 1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2.如果父元素有定位，则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不占有原来的位置

4.子绝父相***

子级使用绝对定位，父级需要用相对定位

相对定位生而为爹，绝对定位生而为子

①子级定位不会占用位置

②父盒子需要加定位限制子盒子在父盒子内显示

③父盒子布局时，需要占有位置，因此父亲只能是相对定位

5.固定定位fixed

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

6.黏性定位sticky

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。