【CSS】 Position(定位)

朱雀 2022-03-22 14:15 268阅读 0赞

position 属性指定了元素的定位类型。  
position 属性的五个值：  
![在这里插入图片描述][20190128174805636.png]  
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

### static 定位 ###

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。  
静态定位的元素不会受到 top, bottom, left, right影响。

![在这里插入图片描述][20190128174939882.png]

### fixed 定位 ###

元素的位置相对于浏览器窗口是固定位置。  
即使窗口是滚动的它也不会移动：

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。  
Fixed定位使元素的位置与文档流无关，因此不占据空间。  
Fixed定位的元素和其他元素重叠。

### relative 定位 ###

相对定位元素的定位是相对其正常位置。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]  
移动相对定位元素，但它原本所占的空间不会改变。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]  
相对定位元素经常被用来作为绝对定位元素的容器块。

### absolute 定位 ###

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]  
absolute 定位使元素的位置与文档流无关，因此不占据空间。  
absolute 定位的元素和其他元素重叠。

### sticky 定位 ###

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]

### 重叠的元素 ###

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素  
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）  
一个元素可以有正数或负数的堆叠顺序：

![在这里插入图片描述][20190128175851477.png]  
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

[20190128174805636.png]: /images/20220322/33e760880d454944939636e6f184dd5d.png
[20190128174939882.png]: /images/20220322/c18e1d6b8a7c4c3d948cedb6af52cb72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220322/2171e0474e254e599b3c56fd3c2baecc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220322/1dcafcafb81a4c0f89e995a8fe4e204b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220322/6b613b426a6147e68272d823820245a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220322/78c62d5cb48d4057af68f6b4ba594fed.png
[20190128175851477.png]: /images/20220322/01423a4529a44cc9a65f4ab64b886b38.png