fixed定位与absolute定位
相同点:
1、fixed定位和absolute定位都是绝对定位
2、fixed定位和absolute定位都脱离了标准文档流,
3、未设置偏移量时,都定位在父元素的左上角
tip:元素设置相对定位或绝对后,就具有了偏移属性和堆叠属性Z-index,属性值越大,越靠上
不同点:
fixed定位:
设置偏移量后:无论有无已经定位的祖先元素,都相对于浏览器窗口进行偏移
未设置偏移量:以其父元素为基准定位,会继续包含在父包含块中。
表现形式:位置固定,不会随滚动条变化;被他遮盖的元素,可以从其下穿过。
absolute定位:
设置偏移量时:无已定位的祖先元素,以<html>为基准偏移;有已经定位的祖先元素,以距离其最近的、已定位的祖先元素为基准偏移
表现形式:位置随滚动条变化
fixed定位与absolute定位的更多相关文章
- Relative 定位与Absolute 定位实例
一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...
- fixed 和 absolute 定位的区别
fixed:固定定位 absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...
- Css fixed和absolute定位差别
fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 ...
- relative 和 absolute 定位关系
问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative 相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...
- CSS 相对|绝对(relative/absolute)定位系列(一)
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- 在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)
一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...
- CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
- 一篇文章搞定Selenium元素定位/封装/数据驱动
小伙伴都知道,自动化最重的,又最"难"(因为实战中会碰到定位的各种坑)那就是定位元素.如果不熟练掌握定位,那只怕你比功能测式的小伙伴下班还会要晚!扎心了吧! Selenium常用定 ...
- 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位
文件正在上传的转圈圈gif图片 一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...
随机推荐
- 戏说云计算之PaaS,IaaS,SaaS【转载】
最近我们聊到“CRM系统PAAS化”,有些可能就不了解,到底什么是PAAS.云计算还有IaaS,SaaS概念,这三者之间有什么区别?今天智云通CRM系统小编用通俗易懂的例子跟大家分享Paas,IaaS ...
- C#操作SQLite 报错 (Attempt to write a read-only database)
解决办法:找到SQLite数据库所在的文件夹,单击右键,属性->安全,为Users用户组添加写入权限.
- TOMCAT-publishing to tomcat v7.0 server at
因为tomcat的work文件没有清空,导致MyEclipse部署在server.xml文件中的项目路径是错误的. 解决办法:清空work文件夹 下面这个勾勾是MyEclipse自动发布项目路径的选项
- sql优化__rownum的使用【转】
ROWNUM的概念ROWNUM是一个虚假的列.它将被分配为 1,2,3,4,...N,N 是行的数量.一个ROWNUM值不是被永久的分配给一行 (这是最容易被误解的).表中的某一行并没有标号:你不可以 ...
- HDU5907 Find Q 数学
题目大意:求当前串中只含q的连续子串的个数 题目思路:水题,但要注意的是计算过程中可能超int范围; #include<iostream> #include<algorithm> ...
- iOS Learning
转载自:http://www.cocoachina.com/ios/20150111/10894.html iOS 学习资料整理 2015-01-11 20:20 编辑: suiling 分类:iOS ...
- 8633 回文划分(dp)
8633 回文划分 该题有题解 时间限制:1000MS 内存限制:1000K提交次数:169 通过次数:63 题型: 编程题 语言: G++;GCC Description 我们说一个字符串是回 ...
- java类对象
不错的文章 原文地址:(转载)java中的Class类与Class对象作者:albert1017 本文用作笔记之用,引用的网上资料: http://www.blogjava.net/formatmys ...
- Django - 通用视图
urls.py from . import views ... url(r'^$', views.IndexView.as_view, name="index"), url(r'^ ...
- 转:Java eclipse下 Ant build.xml实例详解
在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...