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. IntelliJ Idea 第一次使用

    概括 程序员每次电脑重新安装或者新的电脑上进行开发时都会安装一些开发软件,这时候基本都是去官网下载,然后破解(中国程序员啊哈哈)进行快乐使用,为了让自己方便小编也写一个,不用去别人那里找来找去 安装I ...

  2. cocos2dx-lua http请求下载图片，使用XMLHttpRequest类

    HttpFileDownLoadSimple.lua local downloader = {} --数据拆分,以没1024*5字节拆成一段,打包写入文件 (拆完再拼接,转成字符串) local fu ...

  3. java 生产者消费者简单实现demo

    第一种方式 使用BlockingQueue 阻塞队列 public class Threads { public static void main(String[] args) { final Arr ...

  4. 团队软件的NABCD——星遇

    日期:2019.4.17 博客期:053 星期三 我们项目是个面向希望有新奇体验的用户的社交软件,致力于打造不一样的有趣的社交. N:(Need,需求) 目前主流社交软件由于时间原因体量越来越大,各种 ...

  5. Thymleaf 从某处(不包含某处)开始截取字符串到末尾

    简单描述:数据库存放的是id+name,但是做展示的时候,只需要展示name,不展示id.不管是在前台还是在后台,使用传统的方法截取,也是可以的,但是thymleaf提供了一种截取字符串,可以实现从某 ...

  6. UI---设置Activity背景为透明

    1.在values下colors中设置透明颜色 <?xml version="1.0" encoding="utf-8"?> <resourc ...

  7. OpenCV-Python：车道检测

    任务: 一共要完成两项任务: 1. 在所提供的公路图片上检测出车道线并标记 2. 在所提供的公路视频上检测出车道线并标记 方案: 要检测出当前车道,就是要检测出左右两条车道直线.由于无人车一直保持在当 ...

  8. C++输出九九乘法表

    #include "pch.h" #include <iostream> #include <iomanip> using namespace std; i ...

  9. PHP实现多维数组按指定值排序

    主要用到的PHP函数 array_multisort() .先实现指定多维数组一个字段排序 根据二维数组的id值来排序,转换后的数组格式如下: function arraySortByOneField ...

  10. Flume-ng高可用集群负载安装与配置

    1. 写在前面 flume-ng高可用长在大数据处理环节第一个出现,对于处理日志文件有很好的作用,本篇博客将详细介绍flume-ng的高可用负载均衡搭建 2. flume-ng高可用负载均衡描述 在一 ...