fixed和sticky
<!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的更多相关文章
- css-position之fixed vs sticky
css-position之fixed vs sticky fixed(固定定位) 元素相对于浏览器窗口是固定的,即使是窗口滚动,元素也是固定的 sticky(粘性定位) 基于用户滚定动来进行定位的, ...
- 布局fixed和sticky
sticky非常非常非常好用怎么用看代码: 这里为什么没有设置高度呢,因为这个高度应该是浏览器高度,浏览器高度在时刻变化怎么办? js处理: 此JS里面会有执行方法一步一步看 这个里面有JS方法 这个 ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- position属性sticky和fixed的区别比较
position属性之fixed fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位. <!DOCTYPE h ...
- z-index和transform
z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...
- CSS 属性 - position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...
- Weex详解：灵活的移动端高性能动态化方案
原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...
- css之z-index深度解析
(几个重点概念解析) 一.层叠上下文 层叠上下文:如果一个元素拥有层叠上下文.那么就代表这个元素在页面的z轴上是有定位的. 什么元素拥有 层叠上下文:a.根元素.b.z-index值为数值的元素.c. ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
随机推荐
- 构建简单的json树形菜单
json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func: ...
- Nginx 拒接服务漏洞（CVE-2016-0747）整改
Nginx的拒绝服务漏洞主要影响版本为1.10.3之前的版本,为不影响原有nginx的使用,且为避免修改其它配置文件,可以通过编译nginx最新版本的执行文件去替换旧的执行文件,文中的场景为由ngin ...
- sparkStreaming消费kafka-1.0.1方式：direct方式（存储offset到zookeeper）-- 2
参考上篇博文:https://www.cnblogs.com/niutao/p/10547718.html 同样的逻辑,不同的封装 package offsetInZookeeper /** * Cr ...
- day6.python字典练习题
1.有如下变量(tu是个元组),请实现要求的功能 tu = (“alex”, [11, 22, {“k1”: ‘v1’, “k2”: [“age”, “name”], “k3”: (11,22,33) ...
- 犹记当年写出bug睡不着，回想今天只求睡好渡余生……
不想面对已经在博客园注册了3年多的时间 了,就是这么快的就已经过去了近3年的工作时间,从最开始的对编程的困惑到慢慢有一点的认识,好像哦就这样没有什么啊,也没有涉及到一些比较难的东西. 但是当初第一份工 ...
- 【python】廖雪峰python教程学习--基础
No1: 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的 No2: 用r''表示''内部的字符串默认不转义 No3: 以'''开头,敲回车可以换行 No4: 布尔 ...
- flume初识
一.flume特点 flume是目前大数据领域数据采集的一个利器,当然除了flume还有Fluentd和logstash,其他的目前来说并没有深入的了解,但是我觉得flume能够在大数据繁荣的今天屹立 ...
- Java中的泛型 --- Java 编程思想
前言 我一直都认为泛型是程序语言设计中一个非常基础,重要的概念,Java 中的泛型到底是怎么样的,为什么会有泛型,泛型怎么发展出来的.通透理解泛型是学好基础里面中非常重要的.于是,我对<Ja ...
- js的cookie和sesession详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- git 合并子工程
一.关于合并代码合并带有子工程更改的代码1.先git merge master --no-ff origin/devlop(把develop分支代码合并到master) 解决冲突等 2.进入到子工程目 ...