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这个 ...
随机推荐
- Multidex（二）之Dex预加载优化
Multidex(二)之Dex预加载优化 https://www.jianshu.com/p/2891599511ff
- LibreOJ β Round #2
题解: 都是不错的技巧题目 t1暴力就不说了 t2dp是比较显然的 然后发现都是0,1用bitset优化 代码非常短 t3容易发现这个东西在不断合并 于是我们想到启发式合并 存疑:splay启发式合并 ...
- Centos7防火墙常用命令及mask锁定不能添加端口问题
一.开放端口 sudo firewall-cmd --zone=public --add-port=3000/tcp --permanent sudo firewall-cmd --reload 二. ...
- day4.字符串练习题
有变量 name = “alex leNb”,完成如下操作 1. 移除name变量对应的值两边的空格,并输出处理结果 print(name.strip()) 2. 移除name变量左边的’al’并输出 ...
- Python学习（三十）—— Django框架简介
转载自:http://www.cnblogs.com/liwenzhou/p/8296964.html Django框架简介 一.MVC框架和MTV框架(了解即可) MVC,全名是Model View ...
- appium---第二个脚本，定位页面元素
工具使用: 1.android-sdk的自带工具---uiautomator工具 2.使用find_element_by_id寻找元素位置 from appium import webdriver; ...
- Codeforces 109D String Transformation 字符串 哈希 KMP
原文链接https://www.cnblogs.com/zhouzhendong/p/CF109D.html 题目传送门 - CF109D 题意 给定两个字符串 $a,b$ ,求一组 $i,j$ 使得 ...
- u盘系统安装步骤
应今天Webcast听众的要求,写一写从U盘安装Windows 7的必要步骤.步骤一:准备U盘 把容量在4GB以上的U盘插入计算机,在命令行运行下列命令,完成U盘的分区格式化. diskpar ...
- 删除Docker中所有已停止的容器
方法一: #显示所有的容器,过滤出Exited状态的容器,取出这些容器的ID, sudo docker ps -a|grep Exited|awk '{print $1}' #查询所有的容器,过滤出E ...
- 5、Qt Project之键盘数据监控
键盘数据监控: 同样的,键盘的检测和鼠标的情形很类似,都是以QWidget为基类的工程 Step1:在UI设计中添加该模块需要使用的相关组件,如下所示: <width>141</wi ...