sticky的基本使用

position: sticky

position: sticky粘性定位：是css新增的一个position属性。说是对于IOS的兼容性好一点，对于安卓的兼容性不太好

于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。

适用场合：一开始不显示，滚动到一定位置需要显示的元素

使用注意事项：

父元素不能有overflow属性
left、top、right、bottom必须要有一个
仅在父元素内生效，父元素的高度必须大于sticky元素的高度
ios加前缀-webkit-sticky（考虑到兼容问题）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">* {padding: 0;margin: 0;}.header {height: 100px;background: #FAEBD7;}.parent {/* width: 200px; */height: 200px;background-color: #FF0000;/* margin-top: 40px; *//* overflow: auto; */}.child{position: sticky;top: 0px;/* width: 200px; */height: 50px;background-color: blue;/* margin-top: 60px; */}.child2 {height: 800px;background-color: #FFD700;}</style>
</head>
<body><div class="header"></div><div class="parent"><div class="child">  </div><div class="child2">222</div></div>
</body>
</html>

sticky的基本使用相关推荐

AWS ELB Sticky Session有问题？别忘了AWSELB cookie
我们的产品中有两个Module,分别部署在独立的Linux机器上,Module 1需要向Module 2发起Http请求来获得服务.由于Module 2有多台,因此我们会在Module 2前部署一台负 ...
文件的特殊权限:suid sgid sticky
一.文件的特殊权限:suid 展示于文件属主的执行权限位: 如果属主本来有执行权限,则展示为s:否则,展示为S; 功用:对于一个可执行文件来讲,任何用户运行此程序为进程时,进程的属主不 ...
css中底部sticky footer
Sticky footers设计是最古老和最常见的效果之一,它可以概括如下: 1 如果页面内容不够长的时候,页脚块粘贴在视窗底部: 2 如果内容足够长时,页脚块会被内容向下推送. 出现问题如图: 方法 ...
Linux sticky bit 目录权限 rwt权限
[linux权限分为 user group others三组] 今天看到有个目录的权限是rwxrwxrwt 很惊讶这个t是什么,怎么不是x或者-呢?搜了下发现: 这个t代表是所谓的sticky bit ...
特殊权限之set uid，set gid，sticky bit以及软链接和硬链接
为什么80%的码农都做不了架构师?>>> 特殊权限之 set uid 权限说明:set uid权限针对二进制可执行文件,使文件在执行阶段具有文件所有者的权限.比如passwd这 ...
理解基本权限以及特殊权限：Suid 、Sgid、Sticky以及acl
理解基本权限以及特殊权限:Suid .Sgid.Sticky以及acl 1 在Linux中特殊权限是什么?为什么要设定特殊权限?回答这个问题前,我们不妨思考为什么要设定权限? 大家知道Linux中一切 ...
sticky list item
滚动到某一个具体的目录下时,目录就会定位在左上角. 代码: <!doctype html> <html lang="en"><head>< ...
特殊权限控制之SUID、SGID、Sticky及facl
上次讲了基本权限管理中的chown.chgrp.chmod以及umask四个命令,今天我们来讲一讲权限最后的一点内容特殊权限位:SUID.SGID.Sticky以及facl 一.SUID 定义:运行某 ...
position:sticky 的 polyfill——stickyfill 源码浅析
本人最近在修改 blogsue 中的样式时,使用到了 position: sticky.话不多说,开始主要内容. 定义 position: sticky 是 CSS position 属性的一个新值. ...
html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...

sticky的基本使用

sticky的基本使用相关推荐

最新文章

热门文章