CSS - 定位布局（position）

心已赠人 2023-09-28 15:57 15阅读 0赞

**目录**

浮动布局的不足之处

定位模式与边偏移

静态定位

相对定位

层叠上下文（Stacking Context）与z-index

包含块（Containing block）

绝对定位

子绝父相

绝对定位盒子在父元素中水平、垂直居中的实现

固定定位

固定定位实现：功能键固定到版心右侧

粘性定位

浮动和定位可以结合使用吗？

--------------------

### 浮动布局的不足之处 ###

为一个标准流块级元素添加浮动后，该块级元素就会脱标进入浮动流，在浮动流中块级元素（已转为了浮动元素）可以在水平方向上进行布局，这样我们就可以：

*  依赖于标准流中的块级元素进行垂直方向的布局
 *  依赖于浮动流中的块级元素进行水平方向的布局

而这就是浮动布局。

浮动布局的缺点在于：

浮动元素无法自由地指定位置，只能进行左浮动或右浮动，而浮动后的位置是很难控制的。

所以我们需要一种可以实现自由指定元素位置的方式：定位

在CSS中：定位 = 定位模式 + 边偏移

### 定位模式与边偏移 ###

我们通过给元素设置position样式来指定元素的定位模式，常用定位模式如下：

*  static 静态定位
 *  relative 相对定位
 *  absolute 绝对定位
 *  fixed 固定定位
 *  sticky 粘性定位

定位模式的作用是指定元素的定位方式

*  定位元素的进行边偏移时的参照元素是谁
 *  定位元素是否脱标

元素指定了定位模式后，需要继续使用边偏移样式来定位元素的位置，边偏移样式有：

*  left
 *  right
 *  top
 *  bottom

这里无法给出边偏移的含义描述，因为不同定位模式的边偏移效果不同。

### 静态定位 ###

标准流中的元素都存在一个隐式的position:static样式，即标准流中的元素都是静态定位的，所谓静态定位即：

*  标准流中块级元素垂直布局
 *  标准流中行内元素、行内块元素水平布局

静态定位的元素不会脱标，而是就处于标准流中。

静态定位的元素使用边偏移left、right、top、bottom无效，使用z-index无效。

一般来说，静态定位就是标准流布局。

### 相对定位 ###

相对定位的目的是：在不改变页面布局的前提下调整元素位置。

我们为标准流中的元素添加position:relative样式后，该元素就变为了相对定位元素。

--------------------

由于相对定位的元素位置改变，不能改变页面布局，所以相对定位元素需要占据着它在标准流中的位置，即不脱标，否则相对定位元素脱标，会导致它在标准流中后面的元素进据脱标位置，导致页面布局改变。

![6e7b3ccc86164a64bb2900fd35ca65c0.gif][]

上例中，原本红色、蓝色div都是标准流中的块级元素，所以呈现垂直排列。之后将红色div变为相对定位元素，并添加边偏移，导致红色div的位置改变，并空出了原有位置，但是蓝色div并未进据空出来的位置。

因此相对定位元素并未脱标。

--------------------

相对定位元素进行边偏移时，并非它在标准流中的**本体**的位置改变，而是本体的**影子**的位置改变。

影子进行边偏移的参照物就是它在标准流中的本体，所以相对定位模式下的边偏移规则如下：

*  left 定位元素的**影子****左外边距边界**与**其本体****左外边距边界**之间的偏移
 *  right 定位元素的**影子右外边距边界**与**其本体****右外边距边界**之间的偏移
 *  top 定位元素的**影子****上外边距边界**与**其本体上****外边距边界**之间的偏移
 *  bottom 定位元素的**影子下外边距边界**与**其本体****下外边距边界**之间的偏移

![f1380f17e4e64201871be78bf8ba1a32.png][]

上例中，蓝色元素是相对定位的，其本体位于标准流中，有margin:10px的外边距，其影子相对于本体左移10px，上移10px，刚好抵消了margin-top、margin-left的10px距离

### 层叠上下文（Stacking Context）与z-index ###

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴，y轴以及表示层叠的z轴。

一直以来，我们都用标准流、浮动流、定位流来描述元素在z轴上的层叠关系，这是非常笼统的、不准确的，在CSS2.1规范中，元素的层叠关系的描述使用：层叠上下文。

什么是层叠上下文呢？

我们可以将层叠上下文理解为PS中的图层。

然而并非所有元素都能够形成层叠上下文，**常见的**形成层叠上下文的条件如下：

*  文档根元素html形成文档的**根层叠上下文**
 *  **`position`值为 `absolute|relative`，且 `z-index`值不为 `auto`**
 *  **`position` 值为 `fixed|sticky`**
 *  `z-index` 值不为 `auto` 的flex元素，即：父元素 `display:flex|inline-flex`
 *  `opacity` 属性值小于 `1` 的元素
 *  `transform` 属性值不为 `none`的元素
 *  等等

层叠上下文中可以继续形成*子层叠上下文*，比如下面例子

![edd607077a06455cb0cbbadf312af8bc.png][]

> html根元素形成了一个根层叠上下文，red元素又在根层叠上下文的基础上形成一个子层叠上下文。

所以一个层叠上下文（如上例中html根元素）中会包含两类元素：

*  不会形成层叠上下文的元素（如上例中blue元素）
 *  会形成层叠上下文的元素（如上例中red元素）

一个层叠上下文中各元素层叠优先级如下：

![9a03a653e6424236b48ae435693aa8e3.png][]

> 需要注意的是
> 
>  *  同级别的元素显示优先级按照**后来者居上**原则。
>  *  子元素总是显示在**其父层叠上下文**之上。（注意，该规则**不**等价于：子元素总是显示在父元素之上）
>  *  上图中，inline/inline-block元素不会盖住float元素，而是围绕float元素。

我们通过几个例子来验证下：

![b009020489344d4d99f1e92a98ab4107.png][]

如上例中，

red是fixed定位，所以直接形成一个层叠上下文。

blue是relative定位，且z-index不是auto，而是-1，所以也会形成一个层叠上下文。

但是blue是red的子元素，所以blue总是在red之上显示，且会压住red的背景和边框线。

> 子层叠上下文**总是**显示在其父层叠上下文之上。

![a62da9edcf89441eaaabb63cdda1dff6.png][]

上例中，

blue是relative定位、但是z-index为auto，所以不会形成层叠上下文

green是relative定位，且z-index为-1，所以会形成层叠上下文

green是blue的子元素，我们知道子元素总是显示在父层叠上下文之上，但是blue却没有形成层叠上下文，而是z-index:auto级别的普通元素，所以它的优先级是高于z-index:-1的green的，所以上例中green被blue盖住了。

> 子元素总是显示在**其父层叠上下文**之上。（注意，该规则**不**等价于：子元素总是显示在父元素之上）

![44f1650884774070b86ade8e44f977be.png][]

上例中，

html形成一个根层叠上下文

red-sc是absolute定位，且z-index:-1，所以也会形成层叠上下文。

skyblue-float是浮动元素

yellow-block是普通的块级元素

span是行内元素

按照显示优先级顺序，html根层叠上下文作为父层叠上下文位于最下面。

red-sc是z-index:-1的层叠上下文，显示优先级 低于 浮动元素、块级元素、行内元素。

而块级元素显示优先级又低于浮动元素，浮动元素不会盖住行内、行内块元素。

![1c6f996d463c4512bc19e24fd6a455d2.png][]

> 同级别的元素显示优先级按照**后来者居上**原则。

![217ce161a6d4457a9a441a1d695cc90e.png][]

> 同级别的元素显示优先级按照**后来者居上**原则。

![f7bdbc9681d845e19f086f520db75677.png][]

> skyblue-float浮动元素 显示优先级 低于 z-index:auto的red-z-auto定位元素
> 
> z-index:0的blue-z-0定位元素 显示优先级 等同于 red-z-auto，二者显示，采用后来者居上
> 
> green-z-none是fixed定位，他的显示优先级高于z-index:0、z-index:auto的元素
> 
> black-z-positive元素是z-index:1，显示优先级高于fixed定位。
> 
> 所以
> 
> black > green > blue = red > skyblue

### 包含块（Containing block） ###

在学习绝对定位之前，我们需要先了解包含块概念

[布局和包含块 - CSS（层叠样式表） | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing\_block][- CSS_ _ MDN _mozilla.org_https_developer.mozilla.org_zh-CN_docs_Web_CSS_Containing_block]我们通过一个例子来了解包含块是啥

![4fc4392fa639496583bd020b857d5ab5.png][]

上例中，blue元素的大小、位置都是使用的百分比，而不是固定数值，但是blue元素的最终大小、位置如下：

width:150px、height:100px

left:150px、top:100px

我们可以很快分析出，blue元素的位置、大小数据是基于其父元素red的**内容区大小**width:300px、height:200px乘以百分比计算得到的。

此时blue元素的**包含块**就是其**父元素的内容区**。

也就是说：元素的位置和大小受其包含块影响。

那么元素的包含块总是该元素的**父元素的内容区**吗？

不是的。

我们看下面例子

![7f9aa828e4e04b089763922e63044c3c.png][]

上例中，blue元素已经变为了绝对定位元素，其父元素red还是普通块级元素，其祖先元素green是相对定位元素。此时：blue元素的大小、位置是基于green元素的padding区的（green元素padding区的大小为宽度200+20+20=440px，高度300+20+20=340px）计算出来的。

下面我们给定元素的包含块的完整定义：

首先，**确定一个元素的包含块的过程，完全依赖于这个元素的position属性**。

*  如果元素的position是static、relative、sticky，则该元素的包含块由“该元素**最接近的祖先块容器的内容区**的边缘”组成（PS：块容器包括：块级元素block、列表项块元素list-item、行内块inline-block等等）
 *  如果元素的position是absolute，则该元素的包含块由“该元素**最接近的position非static的祖先元素的内边距区**的边缘”组成，如果该元素的祖先中没有position非static的元素，则该元素的包含块就是**初始化包含块**

> 什么是初始化包含块？
> 
> 根元素 (<html>) 所在的包含块是一个被称为**初始包含块**的矩形。他的尺寸是连续媒体的视口 viewport (for continuous media) 或分页媒体 page media (for paged media).

*  如果元素的position是fixed，则在连续媒体的情况下 (continuous media) 包含块是 [viewport][] ,在分页媒体 (paged media) 下的情况下包含块是分页区域 (page area)。

> 什么是连续媒体？
> 
> [Continuous Media - 术语表 | MDN (mozilla.org)][Continuous Media - _ _ MDN _mozilla.org]
> 
> 什么是分页媒体？
> 
> [Paged media - CSS（层叠样式表） | MDN (mozilla.org)][Paged media - CSS_ _ MDN _mozilla.org]
> 
> 简单总结就是：
> 
> 连续媒体可以通过滚动条展示连续的，超出屏幕尺寸大小的内容（如网页）
> 
> 分页媒体的内容不能超出屏幕尺寸，用户通过切页来查看内容（如PPT）
> 
> 浏览器中一般都是连续媒体，所以我们只考虑连续媒体。
> 
> 什么是viewport？
> 
> [视口概念 - CSS（层叠样式表） | MDN (mozilla.org)][- CSS_ _ MDN _mozilla.org]
> 
> viewport即视口，在浏览器中视口，就是展示网页的区域，如下红框区域
> 
> ![4a1dc4765d034a0285112e2510a56d3c.png][]
> 
> 视口有两种：视觉视口、布局视口
> 
> ![e9027301541b4fa8a64aa1286c681350.png][]
> 
> 当网页很大时，或者浏览器窗口缩放时，浏览器视口只能展示部分网页内容，而网页看不见的内容需要通过浏览器滚动条来滚动查看。
> 
> 看的见网页的区域就是视觉视口，整个网页就是布局视口。

根据包含块定义：

*  如果position：absolute元素的祖先元素都是非定位元素，则position：absolute元素的包含块就是初始化包含块，即根元素html所在区域，即浏览器视口。（不考虑分页媒体）
 *  对于position：fixed元素而言，其包含块就是浏览器视口。（不考虑分页媒体）

那么上述两种情况的视口是同一种视口吗？

![408540ba7ae0456ebda1c683e26f2345.png][]

![090182f46231459daca3301ed9214abc.gif][]

我们将body设为宽高3000px，保证其布局视口远大于视觉视口，

然后，设定红色盒子为绝对定位且祖先无定位元素，蓝色盒子为固定定位。

当我们滚动浏览器滚动条时，发现视觉视口中：蓝色盒子位置不变，而红色盒子的位置改变。

所以很容易地得出结论：

*  如果position：absolute元素的祖先元素都是非定位元素，则position：absolute元素的包含块就是初始化包含块，即根元素html所在区域，即浏览器**布局**视口。（不考虑分页媒体）
 *  对于position：fixed元素而言，其包含块就是浏览器**视觉**视口。（不考虑分页媒体）

### 绝对定位 ###

当我们为一个元素添加position:absolute样式后，该元素就变为了绝对定位元素。绝对定位元素具有以下特点：

*  绝对定位元素会脱标，进入定位流
 *  绝对定位元素的边偏移规则如下：
 *  left：*绝对定位元素左外边距边界* 与 *其包含块左边界*之间的偏移
 *  right：*绝对定位元素右外边距边界* 与 *其包含块右边界*之间的偏移
 *  top：*绝对定位元素上外边距边界* 与 *其包含块上边界*之间的偏移
 *  bottom：*绝对定位元素下外边距边界* 与 *其包含块下边界*之间的偏移

而绝对定位元素的包含块是：

*  如果它的祖先存在定位（非static）元素，则*最近一级定位祖先元素的内边距区*就是它的包含块
 *  如果它的祖先不存在定位元素，则*浏览器的布局视口*就是它的包含块

下面对绝对定位元素以上特性进行验证。

--------------------

下面例子中红色div一开始没有绝对定位，当为其添加绝对定位后，红色div脱标，并释放了标准流中的位置，而它标准流之后的元素蓝色div立即就进据了被释放的位置。

![4c305a00bd58437eb3b11a833e7b4b89.gif][]

所以绝对定位元素会脱标。

--------------------

absolute元素的边偏移都是相对于它的包含块进行的。

如果absolute元素的祖先存在定位（非static）元素，则*最近一级定位祖先元素的内边距区*就是它的包含块。

![d230d12f984f4d62876075f8e8920c6a.png][] 上例中，red元素存在一个padding:50px的内边距的定位元素，而blue元素是绝对定位的，且大小为50px，偏移为0，此时我们发现blue元素是以red的padding边缘为参照物进行偏移的，而不是red的content区域。

如果absolute元素的祖先不存在定位元素，则*浏览器的布局视口*就是它的包含块

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        body {
          margin: 0;
          padding: 50px;
        }
    
        .red {
          width: 200px;
          height: 200px;
          background-color: red;
        }
    
        .blue {
          position: absolute;
          left: 0;
          top: 0;
    
          width: 50px;
          height: 50px;
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="red">
        <div class="blue"></div>
      </div>
    </body>
    </html>

![ee0143aa80a343ed8aa115dfc92ea92e.png][]

如上例中，red是普通块级元素，而blue是绝对定位元素，所以blue元素的祖先没有定位元素。blue元素的包含块就是浏览器布局视口 ，而不是body元素的padding区。

### 子绝父相 ###

**什么是子绝父相？**

即父级元素采用相对定位，子级元素采用绝对定位。

**为什么要子绝父相？**

父级元素相对定位，实现自己控制自己的位置

子级元素绝对定位，将参照父相元素进行偏移，即：子绝元素的位置受到父相元素的控制。

如下面这个对话框，

对话框本身是相对定位，这样可以实现自己控制自己的显示位置，不受其他元素影响，

对话框的关闭×按钮是绝对定位，它总是处于对话框的右上角位置，其位置可以参照父相元素的位置进行计算。

![2f181e5cfd394cf0af2c769f1dbb21c6.png][]

**子绝父标行不行？**

即父元素在标准流中，子元素采用绝对定位。缺点有两个：

*  父级元素位置固定，无法改变
 *  子绝元素偏移不参照非定位的父元素，而是参照最近一级的祖先定位元素，因此子绝元素不受父级元素控制

**子绝父绝行不行？**

即父元素是绝对定位，子元素也是绝对对位。缺点有两个

*  父绝元素的位置不受自身控制，而是受其祖先定位元素控制
 *  子绝元素的位置虽然受到父绝元素控制，但是父绝元素的位置无法自己控制，所以也会影响子绝元素。

**子相父绝行不行？**

父子各玩各的，肯定不行。

### 绝对定位盒子在父元素中水平、垂直居中的实现 ###

**方案一：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .red {
          position: relative;
          width: 200px;
          height: 200px;
          background-color: red;
        }
    
        .blue {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -25px;
          margin-top: -25px;
    
          width: 50px;
          height: 50px;
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="red">
        <div class="blue"></div>
      </div>
    </body>
    </html>

![5ed86d02ae4f4fb8867f98496a960f4e.png][]

后面学了2D位移，还可以只要搞。

![da0d986593aa44998226f60643926c4f.png][]

上面这类居中方案思路比较简单，就是先让绝对定位元素的父元素变为相对定位（PS：父元素变为相对定位是不会改变页面布局的，所以可以放心变） ，此时父元素的内容区就是绝对定位元素的包含块，绝对定位元素left：50%，top：50%，相当于left：包含块宽度\*50%，right：包含块高度\*50%，表现为绝对定位元素的左上角点 移动到 父元素中心点，此时绝对定位元素还没有居中，我们继续让绝对定位元素左移自身宽度一半，上移自身高度一般，才能达到全居中。

**方案二：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .red {
          position: relative;
          width: 200px;
          height: 200px;
          background-color: red;
        }
    
        .blue {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
    
    
          width: 50px;
          height: 50px;
          background-color: blue;
        }
      </style>
    </head>
    <body>
      <div class="red">
        <div class="blue"></div>
      </div>
    </body>
    </html>

![3770218936774ec0a2e908e49c149ce0.png][]

这种实现方案还适用于绝对定位元素在body中居中

![87306df3628d4618b857cd066ffed57a.png][]

以上方案的关键点有两个：

*  margin: auto
 *  绝对定位元素四个偏移全部为0

首先margin：auto，相当于 margin: auto auto

> 我们之前学习过margin: 0 auto让标准流中块级元素水平居中，原理是：
> 
> 标准流中块级元素独占一行，如果块级元素盒子总宽度不足以占据一行，则块级元素的右margin会自动填满剩余宽度，而margin: 0 auto的意识是让块级元素的左右margin平分所在行的剩余宽度。这样就能是标准流中块级元素水平居中了。

margin: auto auto 的意思是让：元素的左右margin平分水平方向的剩余宽度，元素的上下margin平分垂直方向的剩余宽度。

好了，接下来解释：绝对定位元素四个偏移全部为0的作用

left：0，表示让绝对定位元素的左外边距 距离 其包含块的左边界为0

right:0，表示让绝对定位元素的右外边距 距离 其包含块的右边界为0

......

那么对于设置宽高的绝对定位元素，这似乎是不可能的。如下图。

![69e5aa7ead9b4574ac31ba85dec9fe1b.png][]

那么如果绝对定位元素没有设置宽高呢？

![c22fb4a30f0c4a90a591275cfcce7147.png][]

我们发现未设置宽高的绝对定位元素自动占满了包含块。

> 确定是自动占满的是包含块吗？我们再给一个例子证明下：
> 
> ![88200bd42d4b4485a62ad35ff74f7a3a.png][] 上例中blue元素是未设宽高的绝对定位盒子，其包含块是最近一级的相对定位父元素red，所以blue元素的包含块就是red元素的padding以内区域。而最终blue也是自适应了其包含块大小。

而对于设置了宽高的绝对定位元素，让其四个偏移为0，其实它也会尝试自动占满包含块，但是由于自身设置了宽高，所以无法占满，此时绝对定位元素只能通过margin来占满包含块内剩余宽高。

![a3a59f426a5649b1b72dc969a64f6032.png][]

此时我们再设置绝对定位元素的margin:auto，则表示让绝对定位元素的左右margin平分其包含块内水平剩余宽度，让上下margin平分其包含块内垂直剩余高度 。

### 固定定位 ###

当我们给标准流中元素添加position:fixed样式后，该元素就会变成固定定位元素，特点是：

*  固定定位元素会脱标，进入定位流
 *  固定定位元素的边偏移规则如下：
 *  left：固定定位元素*左外边距边界* 与 *其包含块（即浏览器的视觉视口）左边界*之间的偏移
 *  right：固定定位元素*右外边距边界* 与 *其包含块（即浏览器的视觉视口）右边界*之间的偏移
 *  top：固定定位元素*上外边距边界* 与 *其包含块（即浏览器的视觉视口）上边界*之间的偏移
 *  bottom：固定定位元素*下外边距边界* 与 *其包含块（即浏览器的视觉视口）下边界*之间的偏移

固定定位元素不会随着页面滚动条滚动，而是保持在视觉视口中的固定位置。

固定定位元素的位置也不受其他元素的影响，因为固定定位元素的位置只受其包含块影响，而它的包含块是浏览器视觉视口。

![a0802cb175634d28bab48ef385f23ac4.gif][]

### 固定定位实现：功能键固定到版心右侧 ###

大部分网站网页在版心右侧都会设置一些功能键，如B站的

![d63de4cccc7540dda0ec1f33e0de8544.png][]

这些功能键要求

*  位置固定，不能随滚动条滚动（元素固定定位即可）
 *  且要贴着版心右侧（?）

那么如何让固定定位的元素位置放在紧贴版心右侧的位置呢？

![dc7f533889cd45168ffacbbf19f6c32d.gif][]

上例中，实现元素固定在版心右侧的关键是：样式类w-right-fix-area

w-right-fix-area元素是固定定位的，所以它的包含块总是**浏览器视觉视口**，

*  当left：50%，即让其偏移视觉视口左边（视觉视口宽度的50%）距离
 *  当top：70%，即让其偏移视觉视口上边（视觉视口高度的70%）距离

此时w-right-fix-area元素位置如下

![2d7a8b8305de446aa04d7c28cd6c7760.png][]

然后再让w-right-fix-area元素margin-left版心宽度一半的距离即可。

版心w元素的width是其包含块内容区宽度**80%**，而w元素的包含块就是其最近的祖先块级容器的内容区，即body的内容区，而body的内容区宽度是100%，即浏览器视觉视口宽度的100%，因此w元素一半的距离就是浏览器视口宽度的**40%**

![2a588d4844b143e98bad2bb82be7ad69.png][]

由于margin-left:40% 会让w-right-fix-area元素紧贴版心右侧，不是很好看，所以margin-left:41%

![69a1921bbdf04ebc966fb53fc2997665.png][]

### 粘性定位 ###

在了解粘性定位之前，我们先来看看粘性效果是啥样的

[中国工商银行中国网站 (icbc.com.cn)][_icbc.com.cn]

![4ab3468f68f841f38d91fcacbaa3eeb3.gif][]

工商银行官网首页的导航栏就具有粘性效果，而工商银行的导航栏确实基于JS实现的。

下面我们通过JS来复刻下工商银行网站导航栏的效果

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        html, body, h1 {
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        body {
          min-width: 1600px;
        }
    
        /* 头部 */
        .head {
          height: 143px;
        }
    
        /* 导航栏,实现粘性定位 */
        .nav {
          width: 100%;
          height: 54px;
          background-color: #c7000b;
          left: 0;
          top: 0;
        }
    
    
        /* 导航栏内容排版,和粘性定位无关 */
        ul {
          display: flex;
          justify-content: center;
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
        ul li:hover {
          background-color: #af0812;
        }
    
        ul li h1 {
          font-size: 24px;
          font-weight: normal;
          height: 54px;
        }
    
        ul li a {
          line-height: 54px;
          text-decoration: none;
          color: white;
          padding: 0 40px;
          border-right: 1px solid #ef1f2a;
          border-left: 1px solid #86232a;
        }
    
        ul li:first-child a {
          padding: 0;
          border-left: none;
        }
    
        ul li:last-child a {
          padding: 0;
          border-right: none;
        }
    
        /* 主体内容 */
        .content {
          height: 2000px;
        }
      </style>
    </head>
    <body>
      <div class="head"></div>
      <div class="nav">
        <ul>
          <li><a href="#"></a></li>
          <li><h1><a href="#">账户服务</a></h1></li>
          <li><h1><a href="#">存款和贷款</a></li>
          <li><h1><a href="#">信用卡</a></li>
          <li><h1><a href="#">外汇业务</a></li>
          <li><h1><a href="#">投资理财</a></li>
          <li><h1><a href="#">私人银行</a></li>
          <li><h1><a href="#">金融市场</a></li>
          <li><a href="#"></a></li>
        </ul>
      </div>
      <div class="content"></div>
      <script>
        const nav = document.querySelector('.nav')
        const shreshold = nav.offsetTop
    
        document.onscroll = function(){
          if(window.pageYOffset >= shreshold) {
            nav.style.position = 'fixed'
          } else {
            nav.style.position = 'static'
          }
        }
      </script>
    </body>
    </html>

![57aa3c05ca3448d7be4ecbcb7cd3ab7a.gif][]

可以发现，基于JS实现粘性很简单，其实就是将

1.  将静态定位下的粘性元素（如.nav） 和页面上边界之间的距离（如nav.offsetTop）设置为阈值threshold
2.  当页面滚动隐藏掉的高度（window.pageYOffset）大于阈值threshold时，则将粘性元素变为固定定位
3.  当页面滚动隐藏掉的高度（window.pageYOffset）小于阈值threshold时，则将粘性元素变为静态定位

但是JS实现粘性定位有一个问题，那就是当粘性元素变为固定定位后，会脱标，导致它之后的页面布局改变，比如工商银行的网站导航栏下方元素就有明显的塌陷抖动

![9a9232da589a4736a25033e0c6c7ef4e.gif][]

从动图中可以发现，当nav导航栏到达顶部后，“个人网上银行登录”这个盒子明显地塌陷抖动了一下。

下面我们使用CSS3的粘性定位来实现上面的导航栏

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        html, body, h1 {
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        body {
          min-width: 1600px;
        }
    
        /* 头部 */
        .head {
          height: 143px;
        }
    
        /* 导航栏,实现粘性定位 */
        .nav {
          position: sticky;
          top: 0;
          width: 100%;
          height: 54px;
          background-color: #c7000b;
        }
    
    
        /* 导航栏内容排版,和粘性定位无关 */
        ul {
          display: flex;
          justify-content: center;
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
        ul li:hover {
          background-color: #af0812;
        }
    
        ul li h1 {
          font-size: 24px;
          font-weight: normal;
          height: 54px;
        }
    
        ul li a {
          line-height: 54px;
          text-decoration: none;
          color: white;
          padding: 0 40px;
          border-right: 1px solid #ef1f2a;
          border-left: 1px solid #86232a;
        }
    
        ul li:first-child a {
          padding: 0;
          border-left: none;
        }
    
        ul li:last-child a {
          padding: 0;
          border-right: none;
        }
    
        /* 主体内容 */
        .content {
          height: 2000px;
        }
      </style>
    </head>
    <body>
      <div class="head"></div>
      <div class="nav">
        <ul>
          <li><a href="#"></a></li>
          <li><h1><a href="#">账户服务</a></h1></li>
          <li><h1><a href="#">存款和贷款</a></li>
          <li><h1><a href="#">信用卡</a></li>
          <li><h1><a href="#">外汇业务</a></li>
          <li><h1><a href="#">投资理财</a></li>
          <li><h1><a href="#">私人银行</a></li>
          <li><h1><a href="#">金融市场</a></li>
          <li><a href="#"></a></li>
        </ul>
      </div>
      <div class="content"></div>
    </body>
    </html>

其实改动很小，实现的效果一样，并且不会发生塌陷抖动。

改动就是，去除JS代码，然后给.nav添加了样式

*  position: sticky; // 表示让nav元素变为粘性定位
 *  top: 0; // 表示当粘性元素距离最近的滚动祖先元素的**内容区未被隐藏区域的上边界**小于0时，则保持位置在等于0，当大于0时，位置随自己的包含块移动。（粘性定位元素的包含块就是其最近的祖先块级容器）

下面是MDN给出粘性定位的定义，我们来分析下：

> 元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest scrolling ancestor）*和 [containing block][] (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于`top`, `right`, `bottom`, 和 `left`的值进行偏移。偏移值不会影响任何其他元素的位置。
> 
> 该值总是创建一个新的[层叠上下文（stacking context][stacking context]）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的`overflow` 是 `hidden`, `scroll`, `auto`, 或 `overlay`时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见[Github issue on W3C CSSWG][]）。

*  元素根据正常文档流进行定位

> 这句话的意思其实就是：粘性定位的元素**不会脱标**，不会影响标准流布局

*  然后相对它的最近滚动祖先和包含块基于`top`, `right`, `bottom`, 和 `left`的值进行偏移。

> 其实这段话应该是有歧义的。
> 
> 粘性定位的边偏移其实是相对于其最近的有滚动机制的祖先元素而言的，
> 
>  *  当粘性定位元素距离其滚动机制祖先元素**内容区未被隐藏的区域的边界**小于设定的偏移值时，粘性定位元素位置将固定在设定的偏移值位置；（表现为固定定位）
>  *  当粘性定位元素距离其滚动机制祖先元素**内容区未被隐藏的区域的边界**大于设定的偏移值时，粘性定位元素会随着包含块移动；（表现为静态定位）

*  偏移值不会影响任何其他元素的位置。

> 这个有点类似于相对定位，相对定位的元素本体不脱标，进行边偏移的是本体的影子，所以相对定位元素的偏移位置改变不会其他元素。
> 
> 粘性定位应该也有本体和影子的概念，本体保持对标准流位置的占据，影子进行边偏移。

*  该值总是创建一个新的[层叠上下文（stacking context][stacking context]）。

> 意思是粘性定位不需要依赖z-index就可以生成一个层叠上下文，且未定义z-index的粘性定位元素在z轴显示优先级只低于z-index为正数的定位元素。

*  注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的`overflow` 是 `hidden`, `scroll`, `auto`, 或 `overlay`时），即便这个祖先不是最近的真实可滚动祖先。

> 这段话意思是，粘性元素会选择一个最近的具有overflow非visible的祖先作为固定定位的相对元素，即使这个祖先并没有滚动条，比如overflow：hidden的元素就没有滚动条。

总结一下粘性定位的特点：

*  不脱标，不影响标准流布局
 *  包含块是其最近的块级容器祖先元素的内容区
 *  会产生层叠上下文，优先级仅低于z-index正值的定位元素对应的兄弟层叠上下文
 *  当粘性定位元素距离其滚动机制祖先元素**内容区**未被隐藏的区域的边界小于设定的偏移值时，粘性定位元素位置将固定在设定的偏移值位置；（表现为固定定位）
 *  当粘性定位元素距离其滚动机制祖先元素**内容区**未被隐藏的区域的边界大于设定的偏移值时，粘性定位元素会随着包含块移动；（表现为静态定位）

下面我们对上述特点进行验证：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        body {
          height: 3000px;
        }
    
        .blue {
          width: 500px;
          height: 500px;
          padding: 100px;
          border: 50px solid black;
          margin: 50px;
          color: white;
          background-color: blue;
          overflow: auto;
        }
    
        .red {
          position: sticky;
          top: 200px;
    
          width: 100%;
          height: 100px;
          background-color: red;
        }
    
        .green {
          width: 100%;
          height: 400px;
          background-color: green;
        }
      </style>
    </head>
    <body>
      <div class="blue">
        blue内容区
        <div class="green"></div>
        <div class="red"></div>
        <div class="green"></div>
      </div>
    </body>
    </html>

![9ec69bb59e344ebf84c1d541bd404238.gif][]

上面动态可以验证：

*  粘性定位元素red不会脱标，粘性定位和相对定位一样，本体会占据着标准流中的位置，影子会进行移动。
 *  粘性定位元素red的位偏移top:200px是相对于其滚动机制父元素blue的**内容区**上边界，而不是padding区，因为上面动图中粘性元素明显固定在了距离滚动机制父元素blue的上边框300px的地方，这里多出了100px就是Blue的padding-top
 *  另外red的width是100%，在动图中刚好是blue元素内容区的宽度，所以red的包含块是它最近块级容器的内容区
 *  当粘性定位元素red上外边距相对于其滚动机制父元素blue的**内容区**上边界大于设定的top:200px时，粘性定位元素red是随着包含块运动的

![a239d14dbcfc408e8f2affb4f791ecf3.gif][]

上面动图可以验证：粘性定位元素red只会固定在最近的具有滚动机制的父元素上，而不会固定在其他具有滚动机制的元素上，如上面的body元素。

![8206bcc35ac344c99112b9ed22993942.gif][]

并且当我们将blue的overflow改为hidden，即blue只是具有滚动机制的元素，但是没有滚动条，red依旧把blue当成最近的具有滚动机制的祖先元素。

### 浮动和定位可以结合使用吗？ ###

**浮动 + 相对定位（√）**

![38f42c8efb5d457a8c2ac2b60fd3280d.png][]

上例中,red元素既是浮动元素，也是相对定位元素，并且red同时具备了浮动特性和相对定位特性。另外red此时会脱标。

**浮动 + 绝对定位（×）**

![b30fe111e04c487ca9a9bddfba619113.png][]

可以发现，如果一个元素同时有浮动和绝对定位，则只有绝对定位生效。

**浮动 + 固定定位（×）**

![7ca883c11ec64830944ed3fda8cf9e5f.png][]

可以发现，如果一个元素同时有固定定位和浮动，则只有固定定位生效

**浮动 + 粘性定位（√）**

![b6cd6238e4ce4ef291be55b4f5136c14.png][]

可以发现，一个元素同时有粘性定位和浮动，则多生效。且此时元素脱标。

总结：对于会导致元素脱标的定位，如：绝对定位、固定定位，则元素浮动被抑制；对于不会导致元素脱标的定位，如：相对定位、粘性定位，则元素浮动也生效。

[6e7b3ccc86164a64bb2900fd35ca65c0.gif]: https://img-blog.csdnimg.cn/6e7b3ccc86164a64bb2900fd35ca65c0.gif
[f1380f17e4e64201871be78bf8ba1a32.png]: https://img-blog.csdnimg.cn/f1380f17e4e64201871be78bf8ba1a32.png
[edd607077a06455cb0cbbadf312af8bc.png]: https://img-blog.csdnimg.cn/edd607077a06455cb0cbbadf312af8bc.png
[9a03a653e6424236b48ae435693aa8e3.png]: https://img-blog.csdnimg.cn/9a03a653e6424236b48ae435693aa8e3.png
[b009020489344d4d99f1e92a98ab4107.png]: https://img-blog.csdnimg.cn/b009020489344d4d99f1e92a98ab4107.png
[a62da9edcf89441eaaabb63cdda1dff6.png]: https://img-blog.csdnimg.cn/a62da9edcf89441eaaabb63cdda1dff6.png
[44f1650884774070b86ade8e44f977be.png]: https://img-blog.csdnimg.cn/44f1650884774070b86ade8e44f977be.png
[1c6f996d463c4512bc19e24fd6a455d2.png]: https://img-blog.csdnimg.cn/1c6f996d463c4512bc19e24fd6a455d2.png
[217ce161a6d4457a9a441a1d695cc90e.png]: https://img-blog.csdnimg.cn/217ce161a6d4457a9a441a1d695cc90e.png
[f7bdbc9681d845e19f086f520db75677.png]: https://img-blog.csdnimg.cn/f7bdbc9681d845e19f086f520db75677.png
[- CSS_ _ MDN _mozilla.org_https_developer.mozilla.org_zh-CN_docs_Web_CSS_Containing_block]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block
[4fc4392fa639496583bd020b857d5ab5.png]: https://img-blog.csdnimg.cn/4fc4392fa639496583bd020b857d5ab5.png
[7f9aa828e4e04b089763922e63044c3c.png]: https://img-blog.csdnimg.cn/7f9aa828e4e04b089763922e63044c3c.png
[viewport]: https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport
[Continuous Media - _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Glossary/Continuous_Media
[Paged media - CSS_ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Paged_Media
[- CSS_ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts
[4a1dc4765d034a0285112e2510a56d3c.png]: https://img-blog.csdnimg.cn/4a1dc4765d034a0285112e2510a56d3c.png
[e9027301541b4fa8a64aa1286c681350.png]: https://img-blog.csdnimg.cn/e9027301541b4fa8a64aa1286c681350.png
[408540ba7ae0456ebda1c683e26f2345.png]: https://img-blog.csdnimg.cn/408540ba7ae0456ebda1c683e26f2345.png
[090182f46231459daca3301ed9214abc.gif]: https://img-blog.csdnimg.cn/090182f46231459daca3301ed9214abc.gif
[4c305a00bd58437eb3b11a833e7b4b89.gif]: https://img-blog.csdnimg.cn/4c305a00bd58437eb3b11a833e7b4b89.gif
[d230d12f984f4d62876075f8e8920c6a.png]: https://img-blog.csdnimg.cn/d230d12f984f4d62876075f8e8920c6a.png
[ee0143aa80a343ed8aa115dfc92ea92e.png]: https://img-blog.csdnimg.cn/ee0143aa80a343ed8aa115dfc92ea92e.png
[2f181e5cfd394cf0af2c769f1dbb21c6.png]: https://img-blog.csdnimg.cn/2f181e5cfd394cf0af2c769f1dbb21c6.png
[5ed86d02ae4f4fb8867f98496a960f4e.png]: https://img-blog.csdnimg.cn/5ed86d02ae4f4fb8867f98496a960f4e.png
[da0d986593aa44998226f60643926c4f.png]: https://img-blog.csdnimg.cn/da0d986593aa44998226f60643926c4f.png
[3770218936774ec0a2e908e49c149ce0.png]: https://img-blog.csdnimg.cn/3770218936774ec0a2e908e49c149ce0.png
[87306df3628d4618b857cd066ffed57a.png]: https://img-blog.csdnimg.cn/87306df3628d4618b857cd066ffed57a.png
[69e5aa7ead9b4574ac31ba85dec9fe1b.png]: https://img-blog.csdnimg.cn/69e5aa7ead9b4574ac31ba85dec9fe1b.png
[c22fb4a30f0c4a90a591275cfcce7147.png]: https://img-blog.csdnimg.cn/c22fb4a30f0c4a90a591275cfcce7147.png
[88200bd42d4b4485a62ad35ff74f7a3a.png]: https://img-blog.csdnimg.cn/88200bd42d4b4485a62ad35ff74f7a3a.png
[a3a59f426a5649b1b72dc969a64f6032.png]: https://img-blog.csdnimg.cn/a3a59f426a5649b1b72dc969a64f6032.png
[a0802cb175634d28bab48ef385f23ac4.gif]: https://img-blog.csdnimg.cn/a0802cb175634d28bab48ef385f23ac4.gif
[d63de4cccc7540dda0ec1f33e0de8544.png]: https://img-blog.csdnimg.cn/d63de4cccc7540dda0ec1f33e0de8544.png
[dc7f533889cd45168ffacbbf19f6c32d.gif]: https://img-blog.csdnimg.cn/dc7f533889cd45168ffacbbf19f6c32d.gif
[2d7a8b8305de446aa04d7c28cd6c7760.png]: https://img-blog.csdnimg.cn/2d7a8b8305de446aa04d7c28cd6c7760.png
[2a588d4844b143e98bad2bb82be7ad69.png]: https://img-blog.csdnimg.cn/2a588d4844b143e98bad2bb82be7ad69.png
[69a1921bbdf04ebc966fb53fc2997665.png]: https://img-blog.csdnimg.cn/69a1921bbdf04ebc966fb53fc2997665.png
[_icbc.com.cn]: https://www.icbc.com.cn/icbc/
[4ab3468f68f841f38d91fcacbaa3eeb3.gif]: https://img-blog.csdnimg.cn/4ab3468f68f841f38d91fcacbaa3eeb3.gif
[57aa3c05ca3448d7be4ecbcb7cd3ab7a.gif]: https://img-blog.csdnimg.cn/57aa3c05ca3448d7be4ecbcb7cd3ab7a.gif
[9a9232da589a4736a25033e0c6c7ef4e.gif]: https://img-blog.csdnimg.cn/9a9232da589a4736a25033e0c6c7ef4e.gif
[containing block]: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
[stacking context]: https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
[Github issue on W3C CSSWG]: https://github.com/w3c/csswg-drafts/issues/865
[9ec69bb59e344ebf84c1d541bd404238.gif]: https://img-blog.csdnimg.cn/9ec69bb59e344ebf84c1d541bd404238.gif
[a239d14dbcfc408e8f2affb4f791ecf3.gif]: https://img-blog.csdnimg.cn/a239d14dbcfc408e8f2affb4f791ecf3.gif
[8206bcc35ac344c99112b9ed22993942.gif]: https://img-blog.csdnimg.cn/8206bcc35ac344c99112b9ed22993942.gif
[38f42c8efb5d457a8c2ac2b60fd3280d.png]: https://img-blog.csdnimg.cn/38f42c8efb5d457a8c2ac2b60fd3280d.png
[b30fe111e04c487ca9a9bddfba619113.png]: https://img-blog.csdnimg.cn/b30fe111e04c487ca9a9bddfba619113.png
[7ca883c11ec64830944ed3fda8cf9e5f.png]: https://img-blog.csdnimg.cn/7ca883c11ec64830944ed3fda8cf9e5f.png
[b6cd6238e4ce4ef291be55b4f5136c14.png]: https://img-blog.csdnimg.cn/b6cd6238e4ce4ef291be55b4f5136c14.png