css中的visibility和position新屬性sticky

摘要： 前言 今天介紹的css的visibility和position新屬性sticky，之前的文章中並沒有提及。關於css文章，前面寫了不少。但是這2個的介紹真沒有，今天簡單介紹一下，就當是補充和積累了吧。 visibility 關於visibility，我們平時用的蠻多，大家知道...

前言

今天介紹的css的visibility和position新屬性sticky，之前的文章中並沒有提及。關於css文章，前面寫了不少。但是這2個的介紹真沒有，今天簡單介紹一下，就當是補充和積累了吧。

visibility

關於visibility，我們平時用的蠻多，大家知道的是，他和display:none的區別。visibility：hidden是佔空間的，渲染的時候會渲染，但是display:none是不佔空間的，具體渲染和載入，請看我之前的文章： ofollow,noindex" target="_blank">https://www.haorooms.com/post/web_http_request

但是：把一個設定為visibility: visible的元素放在一個設定為visibility: hidden的元素裡面，會發生什麼？

.hidden {
visibility: hidden;
}
.hidden .visible {
visibility: visible;
}

如下圖：

按鈕在橙色區域內層，外層隱藏了，但是記憶體照常顯示！

html和css程式碼：

<div class="wrapper">
<button class="button" id="button">haorooms test visible</button>
sfdfsdfsfsdf其他測試文章
</div>

.hidden {
visibility: hidden;
}
.hidden .button {
visibility: visible;
}

.wrapper {
background: orange;
padding: 10px;
overflow: hidden;
}
.button {
font-size: 30px;
}

js程式碼

document.getElementById('button').onclick = function() {
document.body.classList.toggle("hidden");
}

position: sticky

這個屬性之前也瞭解過一部分，但是最近谷歌又支援了這個屬性，讓人拍手稱快！

單詞sticky的中文意思是“粘性的”，position:sticky表現也符合這個粘性的表現。基本上，可以看出是position:relative和position:fixed的結合體——當元素在螢幕內，表現為relative，就要滾出顯示器螢幕的時候，表現為fixed。

那我很久之前做的一個案例來說吧，如下圖：

以前用js和css來做的，現在只要在固定的地方加入如下程式碼：

.fixednav {
position: -webkit-sticky;
position: sticky;
top: 0;
}

關於position: sticky

position:sticky有個非常重要的特性，那就是sticky元素效果完全受制於父級元素們。

這和position:fixed定位有著根本性的不同，fixed元素直抵頁面根元素，其他父元素對其left/top定位無法限制。

sticky元素以下一些特性表現：
1、父級元素不能有任何overflow:visible以為的overflow設定，否則沒有粘滯效果。因為改變了滾動容器（即使沒有出現滾動條）。因此，如果你的position:sticky無效，看看是不是某一個祖先元素設定了overflow:hidden，移除之即可。
2、同一個父容器中的sticky元素，如果定位值相等，則會重疊；如果屬於不同父元素，則會鳩佔鵲巢，擠開原來的元素，形成依次佔位的效果。
3、sticky定位，不僅可以設定top，基於滾動容器上邊緣定位；還可以設定bottom，也就是相對底部粘滯。如果是水平滾動，也可以設定left和right值。