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(相对定位):生成相对 ...
随机推荐
- android最火的开源项目
原文地址:http://www.csdn.net/article/2013-05-21/2815370-Android-open-source-projects-finale 此前,CSDN移动频道推 ...
- C语言算法--统计字符串中单词的个数
#include <stdio.h> #include <string.h> #include <stdlib.h> int main(void) { int le ...
- iOS监听模式系列之关于delegate(代理,委托)的学习
首先,大家应该都明白的是委托是协议的一种,顾名思义,就是委托他人帮自己去做什么事.也就是当自己做什么事情不方便的时候,就可以建立一个委托,这样就可以委托他人帮自己去实现什么方法. 其次,我简单的总结了 ...
- 存储引擎-Buffered tree
Buffered-tree 也称为COLA,即cache-oblivious,可以不需要知道具体内存大小和一个块的大小,使用一套逻辑进行处理,因此内存大小可知,内存可能被临时占用去做其它事情. Buf ...
- 译文:ovs+dpdk中的“vHost User NUMA感知”特性
本文描述了"vHost User NUMA感知"的概念,该特性的测试表现,以及该特性为ovs+dpdk带来的性能提升.本文的目标受众是那些希望了解ovs+dpdk底层细节的人,如果 ...
- 深入浅出理解python 装饰器
之前就了解到了装饰器, 但是就会点皮毛, 而且对其调用方式感到迷茫,正好现在的项目我想优化,就想到了用装饰器, 因此深入研究了下装饰器.先看下代码: import time # 将函数作为参数传入到此 ...
- Eclipse配置SpringBoot
从这一博客开始学习SpringBoot,今天学习Eclipse配置SpringBoot.Eclipse导入SpringBoot有两种方式,一种是在线一个是离线方式. 一.在线安装 点击Eclipse中 ...
- java keytool
1.tomcat 配置Https,server.xml <Connector protocol="org.apache.coyote.http11.Http11Protocol&quo ...
- Odoo 学习【一】http & rpc
HTTP Odoo 中http类中的Root是wsgi应用的入口主程序. 入口,wsgi_server调用如下: def application(environ, start_response): i ...
- Tomcat中常见线程说明
http://blog.csdn.NET/jeff_fangji/article/details/41786205 本文讲述了Tomcat的常见线程的功能.名称.线程池和配置等信息,其中源码来自于To ...