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是个看上去低调,有些特殊才能,气场强大,有着 ...
随机推荐
- DB2物化视图(Materialized Query Tables, MQT)
DB2的物化视图MQT是基于查询结果定义的一个表,MQT中包括的数据来自MQT定义所基于的一个或多个表, 使用MQT能够显著提高查询的操作性能. 数据库的视图和MQT都是基于一个查询来定义的.每当视图 ...
- 高效的TCP数据拆包器
高效的TCP数据拆包器 接收器,每秒拆1KB的包达到30万以上 /// 数据同步协义数据接收器 /// </summary> /// <remarks> /// 主要功能有 / ...
- ble_app_hrs心率程序 nrf51822
所用程序为: H:\keil\ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs 上面的路径是安装sdk之后生成在keil软件所在目录 ...
- api h5 sdk 接入的说明
api 接入 :纯后台接入没有页面 h5接入: 有页面的接入 需要和客户交互 客户输入内容 sdk 接入:需要对方的sdk文件 植入文件
- 74LS153 选择器 【数字电路】
74LS153 我用了八个不同频率的方波信号,用153当作信号选择器,控制环节的开关是4通道的选择器,00 01 10 11分别选择通道 0 1 2 3 以下是八选一的demo
- jquery的图片轮播 模板类型
先说一下用到的几个重要的事件 j jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) ...
- php实现希尔排序（总结）
php实现希尔排序(总结) 一.总结 1.希尔排序的算法思路:分组排序, 缩小增量排序,插入排序 2.算法思路: 循环非常好写 有几次gap:log2(n) 每次gap有几组:gap组 每组有几个元素 ...
- IAR for STM8介绍、下载、安装与注册--转
Ⅰ.写在前面 本文讲述的内容是IAR for STM8的介绍.下载.安装与注册,其安装.注册过程和IAR for ARM类似,如果需要了解IAR for ARM相关的文章,可以到我博客,或微信公众号查 ...
- less中混合
@charset "UTF-8"; //1 普通混合 //2 不带输出的混合:加() .font_hx(){ font-size: 28px; color: red; } h1{ ...
- 基于面向对象js的弹窗的组件的开发案例
var aInput = document.getElementsByTagName("input"); 2 aInput[0].onclick = function() { 3 ...