Css fixed和absolute定位差别
fixed:固定定位
absolute:绝对定位
差别非常easy：
1、没有滚动栏的情况下没有差异
2、在有滚动栏的情况下。fixed定位不会随滚动栏移动而移动。而absolute则会随滚动栏移动
能够这么理解。fixed：固定在当前window不动， absolute：会随參照对象元素的高度和宽度变化而变化
一般fixed用在遮盖层和固定在页面某个位置，如固定在顶端的菜单条，又如弹出提示框居中显示
以下样例但是简单測试两者之间的差别，注意拖动滚动栏看差异
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
body {
height:1000px;/*让窗口出现滚动栏*/
}
.fixed {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
width: auto;
height: auto;
border: 1px solid blue;
}
.absolute {
position: absolute;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
width: auto;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="fixed">fixed定位</div>
<div class="absolute">absolute定位</div>
</body>
</html>
效果例如以下：当滚动栏下拉时，absolute层会上移。fixed层不动
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
Css fixed和absolute定位差别的更多相关文章
- fixed 和 absolute 定位的区别
fixed:固定定位 absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...
- 移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题
var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...
- 关于移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题
var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- css position static | absolute | fixed | relative
<div id="bigbox1"> <div id="box1" class="box">box1</ ...
- css中postion的fixed与absolute区别详解
fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...
- fixed定位与absolute定位
相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...
- CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
随机推荐
- OpenCV —— 写入AVI视频文件
打开视频文件,对每一帧进行极坐标变换,然后将转换生成的图像序列写入视频文件中 #include "cv.h" #include "highgui.h" int ...
- 用console.log分析Vue源码
前言 本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化. 控制台输出的效果图 请用chrome查看,并打开控制台看效果 演示地址 准 ...
- PatentTips - Transparent unification of virtual machines
BACKGROUND Virtualization technology enables a single host computer running a virtual machine monito ...
- IOS - 获取UITextField的输入文本
当UITextField文本改变时, 依据内容更新数据, 通过写监听事件就可以. 加入监听: [timesField addTarget:self action:@selector(textField ...
- Finance and Good Society
Finance is a technology of great power. It plays an important role in our society which range from t ...
- 将字符串使用md5加密
>>> import md5 >>> md5.md5('123').hexdigest() '202cb962ac59075b964b07152d234b70' & ...
- js获取单选button的值
<!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...
- 2.Xml与多个对象的映射（聚合或组合）及注意事项
在我们的实际应用中,Xml中的结构往往不止这么简单,一般都会有2,3层.也就是说如果映射成对象就是聚合(组合)的情况 . 就用我们上一章的例子继续来讲,简单我们的Book的author现在不止是一个S ...
- Spark MLlib架构解析（含分类算法、回归算法、聚类算法和协同过滤）
Spark MLlib架构解析 MLlib的底层基础解析 MLlib的算法库分析 分类算法 回归算法 聚类算法 协同过滤 MLlib的实用程序分析 从架构图可以看出MLlib主要包含三个部分: 底层基 ...
- 2.2 Consumer API官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2.2 Consumer API 2.2.消费者API 随着0..0版本,我们已经增 ...