公告:携程招聘java、前端、测试、产品等,请发简历至374947554@qq.com,帮内推!

css中的visibility和position新属性sticky

4885次浏览

前言

今天介绍的css的visibility和position新属性sticky,之前的文章中并没有提及。关于css文章,前面写了不少。但是这2个的介绍真没有,今天简单介绍一下,就当是补充和积累了吧。

visibility

关于visibility,我们平时用的蛮多,大家知道的是,他和display:none的区别。visibility:hidden是占空间的,渲染的时候会渲染,但是display:none是不占空间的,具体渲染和加载,请看我之前的文章:https://www.haorooms.com/post/web_http_request

但是:把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面,会发生什么?

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

如下图:

enter image description here

按钮在橙色区域内层,外层隐藏了,但是内存照常显示!

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。

那我很久之前做的一个案例来说吧,如下图:

enter image description here

以前用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值。

Tags: cssvisibilitysticky

相关文章: