<!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. BZOJ 1706

    题解: 倍增+floyd 首先这题比较容易想到是把每个点拆点做dij 但是这样复杂度是knlogn的 这道题的k较大,所以不行 我们考虑到每走一步,其实就是在进行一次floyd 而这个可以看成矩阵乘法 ...

  2. alpha冲刺9/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之9 团队部分 后敬甲(组长) 过去两天完成了哪些任务 答辩准备中 和大佬们跟进进度 接下来的计划 准备答辩 ...

  3. Introduction to boundary integral equations in BEM

    Boundary element method (BEM) is an effective tool compared to finite element method (FEM) for resol ...

  4. Nginx 拒接服务漏洞（CVE-2016-0747）整改

    Nginx的拒绝服务漏洞主要影响版本为1.10.3之前的版本,为不影响原有nginx的使用,且为避免修改其它配置文件,可以通过编译nginx最新版本的执行文件去替换旧的执行文件,文中的场景为由ngin ...

  5. linux 软中断过高性能优化案例

    案例如下: 发现cpu0上的软中断高达50%

  6. web请求过程-学习使人快乐1

    智齿离开我10个小时了,现在除了书啥都不能啃········呜呜呜~     ~~~~~~~~~~~~~~~~~~~想滑滑梯~~~~~~~~~~~~~~~~~~~ 网络请求过程 web请求大多使用B/ ...

  7. sql 表值函数-将一个传入的字符串用2中分隔符拆分成临时表

    USE [tms]GO/****** Object: UserDefinedFunction [dbo].[fn_StrToTable_Double] Script Date: 2017/4/26 9 ...

  8. BigDecimal的引入和概述

    [代码] System.out.println(0.09 + 0.01); System.out.println(0.1 - 0.32); System.out.println(1.015 * 100 ...

  9. 20165220 2017-2018-2《Java程序设计》课程总结

    每周作业链接汇总: 20165220 我期望的师生关系 20165220 学习基础和C语言基础调查 20165220 Linux安装及学习 20165220 第一周学习总结 20165220 第二周学 ...

  10. POJ 2481 Cows 【树状数组】

    <题目链接> 题目大意: 就是给出N个区间,问这个区间是多少个区间的真子集. 解题分析: 本题与stars类似,只要巧妙的将线段的起点和终点分别看成 二维坐标系中的x,y坐标,就会发现,其 ...