狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

粘性定位看著很簡單，但也很容易出現不生效的情況。為幫助大家徹底理解粘性定位，本文會從 3 個方面來介紹：

• 粘性定位的原理。

• 不生效的情況。

• 具體的例子。

原理

為便于理解粘性定位，這里引入四個元素：視口元素，容器元素，粘性約束元素 和 sticky 元素。它們的關系如下：

視口元素：顯示內容的區域。會設置寬，高。一般會設置 overflow:hidden。
容器元素：離 sticky 元素最近的能滾動的祖先元素。
粘性約束元素：粘性定位的父元素。有時，也會出現粘性約束元素就是容器元素的情況。
sticky 元素：設置了 position: sticky; 的元素。

滾動時，sticky 元素設置的 left, right, top, bottom 的值相對的是容器元素。當粘性約束元素滾出視口時，sticky 元素也會滾出視口。

不生效的情況

情況1: 未指定 top, right, top 和 bottom 中的任何一個值

此時，設置 position: sticky 相當于設置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一個值。

情況2: 垂直滾動時，粘性約束元素高度小于等于 sticky 元素高度

不生效的原因：當粘性約束元素滾出視口時，sticky 元素也會滾出視口。粘性約束元素比 sticky 元素還小，sticky 元素沒有顯示固定定位狀態的機會。

同樣的，水平滾動時，粘性約束元素寬度小于等于 sticky 元素寬度時，也不會生效。

情況3: 粘性約束元素和容器元素之間存在 overflow: hidden 的元素

該情況的示例代碼:

<div class="viewport">

  <div class="container"> <!-- 容器元素 -->

    <div style="overflow: hidden">

      <div> <!-- 粘性約束元素 -->

        <div class="stick-elem">...</div>  <!-- sticky 元素 -->

        ...

      </div>

    </div>

  </div>

</div>

<div class="header">網站頭部</div>

<!-- 粘性約束元素 -->

<div class="article">

  <!-- sticky 元素 -->

  <h2 class="title">徹底理解粘性定位 - position: sticky</h2>

  <div class="content">...</div>

</div>

<div class="footer">網站底部</div>

.title {

  position: sticky;

  top: 0;

  background-color: #fff;

}