fixed 和 absolute 定位的区别
fixed:固定定位 absolute:绝对定位
在没有滚动条的情况下两者其实没有差异。但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高变化为移动。
一般fixed用在遮盖层和固定在页面某个位置(固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等)。
在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候,也能始终让遮罩盖住整个窗口!!!
测试代码,拖动滚动条看差异
<style>
body {
height:1000px;/*让窗体出现滚动条*/
}
.fixed {
position: fixed;
width: 100px;
height: 100px;
right: 0;
color:blue;
border: 2px solid blue;
}
.absolute {
position: absolute;
width: 100px;
height: 100px;
color:red;
border: 2px solid red;
}
</style>
<div class="fixed">fixed定位</div>
<div class="absolute">absolute定位</div>
滚动前:

滚动后:

fixed 和 absolute 定位的区别的更多相关文章
- Css fixed和absolute定位差别
fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 ...
- position:relative/static/fixed/absolute定位的区别以及使用场景
absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...
- 移动端的文本框获取焦点时导致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 ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- fixed和absolute的区别
今天在实际项目中,写首页一屏的时候,发现页脚定位(position:absolute:)没有达到我想要的效果(不管屏幕大小,页脚始终相对浏览器底部定位).于是我觉得有点奇怪,然而我旁边的小哥说:很明显 ...
- css中postion的fixed与absolute区别详解
fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...
- fixed定位与absolute定位
相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...
- Position属性四个值:static、fixed、absolute和relative的区别
1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...
随机推荐
- 使用vs2010 opencv2.4.4编译release版本程序
大体上要注意一下几点内容: 1.vc++目录的选择上,库目录选择为opencv目录中的staticlib目录 2.在链接->输入->附加依赖库,中添加,相应的staticlib库目录中的所 ...
- 用nodejs实现简单爬虫
前言 本喵最近工作中需要使用node,并也想晋升为全栈工程师,所以开始了node学习之旅,在学习过程中, 我会总结一些实用的例子,做成博文和视频教程,以实例形式来理解体会node的用法,所以跟小猫 ...
- Eclipse两种部署web项目方法
一).首先使用J2EE的Eclipse的Servers(可以从show view中取出). 1).通过Eclipse建立一个Dynamic Web Project 2).通过Servers视图来创建一 ...
- 用eclipse运行和部署myeclipse项目
版本:Eclipse-jee-indigo(3.7) 配置Project Facets 点击项目选择 properties -->Project Facets--> Dynamic Web ...
- Day4_生成器_三元表达式_列表解析_生成器表达式
生成器:在函数内部包含yield关键,那么该函数执行的结果就是生成器. 生成器就是迭代器. def func(): print('first') yield 111111 print('second' ...
- Install OpenCV on Ubuntu or Debian
http://milq.github.io/install-OpenCV-ubuntu-debian/转注:就用第一个方法吧,第二个方法的那个sh文件执行失败,因为我价格kurento.org的源,在 ...
- unity零基础开始学习做游戏(四)biu~biu~biu发射子弹打飞机
-------小基原创,转载请给我一个面子 主角都能移动了,那不得做点什么伸张正义,守护世界和平的事嘛,拿起家伙biu~biu~biu~ 首先得做一个好人和一个坏人 老规矩,Canvas下创建两个Im ...
- unity做游戏常用功能实现(一)多方向同时输入也能让物体正常移动
-------小基原创,转载请给我一个面子 网上有很多讲输入控制如何移动,但是多数都是讲单一按下,对于同时按下2个或2个以上按键并没有说明怎么解决,这里小基研究了一下方便大家 (如果你直接写input ...
- 如何找某个样式属于哪个Element
如果找不到样式所在的Element,那么可以参考排除法,逐个删除覆盖在同一位置的元素,如果该样式消失,那么可以判断为这个样式.
- python笔记:#004#注释
注释 目标 注释的作用 单行注释(行注释) 多行注释(块注释) 01. 注释的作用 使用用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序的可读性 02. 单行注释(行注释) 以 # 开头,# ...