<!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. AndroidStudio在线搜索最新版本的依赖库

    操作步骤 打开File–>Project Structure 选中当前项目,点击Denpendencies标签 点击+,选Library dependency 打开界面如下: 输入想要的依赖库部 ...

  2. Java基础知识➣序列化与反序列化（四）

    概述 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件之后,可以从文件 ...

  3. mysql表管理

    4.1 查看所有表 查看所有表语句: show tables; 例: mysql> show tables; +-----------------+ | Tables_in_emp | +--- ...

  4. 【Android】修改Android 模拟器IMSI

    修改Android 模拟器IMEI 在.....\android_sdk\tools文件下找到emulator-arm.exe,使用UltraEdit文本编辑器打开,搜索CIMI关键字,把310260 ...

  5. FTP（虚拟用户，并且每个虚拟用户可以具有独立的属性配置）

               VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,它的全称是Very Secure FTP 首先安装   主配置文件:/etc/vsftpd/vsftpd. ...

  6. Linux LVM动态扩容

    引用自:  https://blog.csdn.net/u012439646/article/details/73380197   xfs_growfs /dev/centos/root  一.首先安 ...

  7. python基础篇_001_初识Python

    一.Python环境 windows环境安装Python步骤 .下载安装包:https://www.python.org/downloads/windows/  .安装:默认安装路径:C:\pytho ...

  8. Oracle内置存储过程之DBMS_OUTPUT

    1.DBMS_OUTPUT 1.1 作用: 调试PL/SQL程序 1.2 相关函数: 命令 作用 备注 enable 在serveroutput on的情况下,用来使dbms_output生效(默认即 ...

  9. 【C#】获取URL上的参数

    图是不知道什么时候截的,给不了原链接了QAQ

  10. nginx那些事儿

    一.mac上安装nginx brew install nginx # 核心安装目录,启动文件在该目录的bin下面,欢迎页面在html下面. /usr/local/Cellar/nginx/1.12.2 ...