position属性之fixed

fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{ float: left;
margin-right: 20px;
}
.div1{
background-color: #FF0000;
width: 10000px;
height: 10000px; }
.div2{
background-color: #33FF66;
width: 100px;
height: 100px;
position: fixed;
left: 50px;
top: 50px;
}
</style> </head> <body>
<div class="div1">层1</div>
<div class="div2">层2</div>
</body> </html>

在vscode上运行后

由于px设置够大,网页可以滚动

在拖动滚动条后,如下图

我们可以发现随着滚动条的下滑,层二的位置始终不变。这便是fixed属性。

如果把层二div中  position:fixed;

left:50px;

top:50px;   并且把层1块的height设置得大一些(让页面有滚动的效果)

去掉,那么,层2将不会随着滚动条的下滑而下滑,如下图:

sticky

<!DOCTYPE html>
<html>
<head> <title></title>
<style type="text/css">
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.sticky-box {
<!-- position: -webkit-sticky;
position: sticky; -->
height: 60px;
margin-bottom: 30px;
background:violet;
<!--top: 0px; -->
} div {
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}
</style> </head> <body>
<div class="container">
<div class="sticky-box">内容1</div>
<div class="sticky-box">内容2</div>
<div class="sticky-box">内容3</div>
<div class="sticky-box">内容4</div>
</div>
</body> </html>

上图html注释掉  {

position: -webkit-sticky;

position: sticky;

top:0px;

}

运行后,效果如下图:

可以看见效果和fixed是一样的,随着滚动条移动,图形也跟着移动。

但是加上

{

position: -webkit-sticky;

position:  sticky;

top:0px;

}

之后再运行,效果如下图:

可以发现,注释过的html运行后,内容板块随着滚动条的下移消失在视口。而没有注释的代码“内容四”即使在滚动条下滑到最后都停留在视口的最上方。这就是fixed和sticky的属性的区别了。

再有,因为设置的是top:0px;

让我们改成top:100;运行后如下图:

可以看见,滚动条即使下移到最下方,内容板块也和视口顶部差100px;

sticky实验总结:

top:0px;      时,属性和fixed相似。

top:  px>0时,    属性加成relative。

------------------------------------------------------------------------------------------------------------完美分割线----------------------------------------------------------------------------------------------------------------

position:sticky;的生效规则:
1、必须指定top、right、bottom、left四个阈值的其中之一(比如本次sticky使用了top),才可使粘性定位生效。

2、到达设定的阈值。

比如本次sticky的阈值为top:0px;

top:0px;时sticky体现fixed的属性。

top>0px 时 sticky还要加成relative的属性。

------------------------------------------------------------------------------------又一完美分割线------------------------------------------------------------------------------------------

sticky和fixed的区别是:

sticky可以有fixed的滚动的效果,而fixed没有sticky的粘性的效果(可以不随滚动而消失在视口)。

position属性sticky和fixed的区别比较的更多相关文章

  1. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  2. position的sticky与fixed

    fixed(固定定位) 生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过 "left", "top", "right" 以及 & ...

  3. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  4. ----关于posotion的sticky与fixed的区别----

    sticky 出现在正常流当中,不能设置定位,随页面滚动 (sticky = relative + fixed) fixed 不出现在正常流当中,能设置定位,随页面滚动 eg: html: <p ...

  5. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  6. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

  7. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  8. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  9. css的float和position属性

    (1)float的简单用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. 第十六节,OpenCV(学习五)边缘检测

    边缘检测 边缘检测的目的是标识数字图像中亮度变化明显的点,边缘检测是特征提取的重要领域. 1.检测方法 边缘检测的方法大致分为两类:基于搜索和基于零交叉 基于搜索的边缘检测方法首先计算边缘强度,通常用 ...

  2. mysql windows 安装 错误

    1 免压缩版安装会经常提示需要c++库,还是要用安装版. 2 安装板默认在c盘,修改目录要注意目录权限. 3 要把datadir的data目录全部考到新目录下.

  3. Filebeat 启动关闭流程

    启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...

  4. m3u8下载转码一次完成

    最近看到有部分网站开始加入视频解析服务,虽然这种服务会损害土豆优酷等视频托管商的权益,但是,烦人的广告也让我们开始寻找有没有什么比较靠谱的解决方法~实际上很多网站都在使用m3u8文件格式,里面都是视频 ...

  5. wireshark & fiddler

    wireshark display filterhttps://www.wireshark.org/docs/wsug_html_chunked/ChWorkBuildDisplayFilterSec ...

  6. [转] golang中struct、json、map互相转化

    一.Json和struct互换 (1)Json转struct例子: type People struct { Name string `json:"name_title"` Age ...

  7. Oracle建立全文索引详解

    Oracle建立全文索引详解1.全文检索和普通检索的区别 不使用Oracle text功能,当然也有很多方法可以在Oracle数据库中搜索文本,比如INSTR函数和LIKE操作: SELECT *FR ...

  8. JavaScript代码规范

    变量名:驼峰命名法(首单词小写,后面每个单词首字母大写) firstName = "John"; lastName = "Doe"; price = 19.90 ...

  9. RROR: [XSIM 43-3238] Failed to link the design.

    仿真时遇到上述错误,在tcl下运行 set_property -name {xsim.elaborate.xelab.more_options} -value {-cc clang} -objects ...

  10. VS 编码规范---- 代码注释设置

    一个良好的代码风格在开发过程和后期维护过程中是必不可少的.每次在添加新类的时候都需要添加一些关于类的注释,包括创建时间.创建人.类的功能介绍.修改时间等一系列的信息,以方便以后的查找和快速了解.在Co ...