<!DOCTYPE html><html>

 <head>

     <meta charset="utf-8">

     <title>fixed和sticky</title>

     <style type="text/css"></style>

     <link rel="stylesheet"href="fixedsticky.css">

 </head>

 <body>

     <div class="one">fixed</div>

     <div class="two">sticky</div>

 </body>

 </html>
 body{

     margin:0px;

 }

   .one {

     width:100px;

     height:1000px;

     background: red;

   }

   .two{

     position:sticky;

     width:100px;

     height:100px;

     background:blue;

     top:30px;

     left:120px;

   }

fixed和sticky的更多相关文章

  1. css-position之fixed vs sticky

    css-position之fixed  vs sticky fixed(固定定位) 元素相对于浏览器窗口是固定的,即使是窗口滚动,元素也是固定的 sticky(粘性定位) 基于用户滚定动来进行定位的, ...

  2. 布局fixed和sticky

    sticky非常非常非常好用怎么用看代码: 这里为什么没有设置高度呢,因为这个高度应该是浏览器高度,浏览器高度在时刻变化怎么办? js处理: 此JS里面会有执行方法一步一步看 这个里面有JS方法 这个 ...

  3. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  4. position属性sticky和fixed的区别比较

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

  5. z-index和transform

    z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...

  6. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  7. Weex详解：灵活的移动端高性能动态化方案

    原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...

  8. css之z-index深度解析

    (几个重点概念解析) 一.层叠上下文 层叠上下文:如果一个元素拥有层叠上下文.那么就代表这个元素在页面的z轴上是有定位的. 什么元素拥有 层叠上下文:a.根元素.b.z-index值为数值的元素.c. ...

  9. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

随机推荐

  1. HDU 5977 Garden of Eden （树形dp+快速沃尔什变换FWT）

    CGZ大佬提醒我,我要是再不更博客可就连一月一更的频率也没有了... emmm,正好做了一道有点意思的题,就拿出来充数吧=.= 题意 一棵树,有 $ n (n\leq50000) $ 个节点,每个点都 ...

  2. mysql分组（五）

    MySQL GROUP BY 语句 GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. GROUP BY 语法 SELECT ...

  3. docker-java Docker的java API

    docker-java docker-java 是 Docker的 Java 版本API Docker 当前的实现基于 Jersey 2.x 因此 classpath 不兼容老版本的 Jersey 1 ...

  4. python__int 部分内部功能介绍

    查看创建的对象的类型: age=18 print(type(age)) 结果: <class 'int'> x.bit_length():返回二进制的位数 Python中进制的转换: Py ...

  5. centos环境gcc版本升级

    今天项目需要做node.js项目的性能测试,通过在centos上搭建nodejs环境 安装过程中提示:

  6. ActiveMQ挂了，重启一直无法将所有实例启起来的问题

    背景 2017年3月29日  下午2-3点时分,工单模块无法访问.跟踪日志发现,ActiveMQ连接不上导致整个工单模块瘫痪: 首先判断可能是系统需要然后尝试重启工单模块,重新启动工单模块,结果:重启 ...

  7. ESP8266基础篇

    ESP8266基础篇 模块刚到如图所示~2016-01-26 后三张是手机APP的截图,前面是两个ESP8266的硬件模块,当然大家不应定要买两个,自己焊锡一个USB转TTL的串口就行了,有了下面的底 ...

  8. CentOS7配置FTP服务器增强版~(零基础学会FTP配置)

    ps:原文不知出处,但是原文也不能正常启动,这里做了一些修改!如果能正常配置请在下方留言让更多的人看到,因为之前我本人照着网上的教程安装卸载了十多次也无法正常使用,不希望后面的兄弟继续浪费时间,如果不 ...

  9. java中可以对时间进行加减处理，有时候不用在sql语句中处理

    String ssny = (String) pd.get("ssny");   SimpleDateFormat simpleDateFormat=new SimpleDateF ...

  10. soul

    mark,数据使用gzip加密,因为公司网络卡,明天后天看.