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这个 ...
随机推荐
- Sqlserver2014 Master....提示异常，IIS未安装
Q:使用Windos认证,登录失败,问题待解决补充 Q:打开Sqlserver2014 Master....提示异常,IIS未安装 解决方案: 安装iis配置,并全部勾选asp.net特性等 Tip ...
- 牛客网练习赛t2（线段树）
题解: 好像因为他说了 数据范围全部在ll以内 所以直接暴力就可以过了 比较正常是用线段树来维护 洛谷上有道模板题是支持加,乘,区间和 而这题还多了区间平方和的操作 按照那题的操作 我们维护的时候保证 ...
- mysql时间延时注入案例
通过Burpsuite结合sqlmap发现如下接口存在时间盲注
- HDU5117 Fluorescent 期望 计数 状压dp 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/HDU5117.html 题目传送门 - HDU5117 题意 $T$ 组数据. 给你 $n$ 盏灯 ,$m$ 个 ...
- HDU2449 Gauss Elimination 高斯消元 高精度 （C++ AC代码）
原文链接https://www.cnblogs.com/zhouzhendong/p/HDU2449.html 题目传送门 - HDU2449 题意 高精度高斯消元. 输入 $n$ 个 $n$ 元方程 ...
- POJ3740 Easy Finding 舞蹈链 DLX
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目 精确覆盖问题模板题 算法 DLX算法 学习DLX算法--传送门 代码 #include <cstring> ...
- Hive| ETL清洗& 查询练习
ETL清洗数据 导Jar包 <dependencies> <dependency> <groupId>log4j</groupId> <artif ...
- @Transactional spring 配置事务 注意事项
1. 在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义和接口方法.类定义和类的 public 方法上 . 2. @Transaction ...
- Zookeeper三个监听案例
一.监听某一节点内容 /** * @author: PrincessHug * @date: 2019/2/25, 14:28 * @Blog: https://www.cnblogs.com/Hel ...
- HYSBZ 4034 【树链剖分】+【线段树 】
<题目链接> 题目大意: 有一棵点数为 N 的树,以点 1 为根,且树点有权值.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x ...