visibility

关于visibility，我们平时用的蛮多，大家知道的是，他和display:none的区别。visibility：hidden是占空间的，渲染的时候会渲染，但是display:none是不占空间的。

但是：把一个设置为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值。