<!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. Redis的消息通知

    Redis的消息通知可以使用List类型的LPUSH和RPOP(左进右出),当然更方便的是直接使用Redis的Pub/Sub(发布/订阅)模式. 1.使用List实现队列 使用列表类型的LPUSH和R ...

  2. jQuery中ajax如何返回值到上层函数里？

    这个涉及到js的异步执行了,程序本身是同步执行的,到了getJSON这里的时候,这个函数是异步的,而 load_val这个函数是同步的,你需要这样来异步返回这个值 function load_val( ...

  3. appium---第二个脚本，定位页面元素

    工具使用: 1.android-sdk的自带工具---uiautomator工具 2.使用find_element_by_id寻找元素位置 from appium import webdriver; ...

  4. Codeforces 873F Forbidden Indices 字符串 SAM/(SA+单调栈)

    原文链接https://www.cnblogs.com/zhouzhendong/p/9256033.html 题目传送门 - CF873F 题意 给定长度为 $n$ 的字符串 $s$,以及给定这个字 ...

  5. Oozie

    Oozie的功能模块 workflow 由多个工作单元组成 工作单元之间有依赖关系 MR1->MR2->MR3->result hadoop jar:提交1个MR oozie:监控当 ...

  6. 同构体字符串（如果 s 中的字符可以被替换得到 t ，那么这两个字符串是同构的。 所有出现的字符都必须用另一个字符替换，同时保留字符的顺序。两个字符不能映射到同一个字符上，但字符可以映射自己本身。）

    示例 1: 输入: s = "egg", t = "add" 输出: true 示例 2: 输入: s = "foo", t = " ...

  7. dubbo spring bean id冲突

    service-security-provider应用有provider和consumer配置文件 其中secutrity-consumer引用两个服务 <dubbo:reference int ...

  8. solr6.5.0（windows）教程

    第一步:安装Tomcat8重命名结尾加上solr6(自定义) 第二步: 解压solr,把solr-6.5.0\solr-6.5.0\server\solr-webapp下的webapp文件夹拷贝到to ...

  9. Codeforces 862D. Mahmoud and Ehab and the binary string 【二分】(交互)

    <题目链接> 题目大意: 有一个长度为n(n<1000)的01串,该串中至少有一个0和一个1,现在由你构造出一些01串,进行询问,然后系统会给出你构造的串与原串的   Hamming ...

  10. The more, The Better

    The more, The Better依赖背包+树形dpf[x][j+1]=max(f[x][j+1],f[x][j+1-k]+f[i->n][k]);我的一个疑问就是这k个节点会不会选重复, ...