CSS 元素的绝对定位 position: absolute 和 position: fixed
当一个元素的 position属性设置为 absolute 或 fixed,它将使用绝对定位。绝对定位的元素将从文档流中完全删除,它原先在正常文档流中所占的空间会关闭,就好像该元素不存在一样,因此不会在原先的位置留下空白。
绝对定位的元素相对它的包含块进行定位。position: absolute 元素的包含块是最近已定位(position属性被设置,且不是static)的祖先元素,如果没有已定位的祖先元素,则为初始包含块(即 html 元素),也就是视口。position: fixed 元素的包含块是初始化包含块。当页面出现滚动条时,无论如何滚动,position: fixed 的元素始终处于固定的位置,不会随着页面滚动。因此,position: fixed 的定位被称作固定定位。不过,IE6及以下版本不支持固定定位。
绝对定位元素中,top、bottom、left、right 属性的含义,与相对定位元素完全不同,需要特别注意。绝对定位元素的 top、bottom、left、right 属性,表示元素自身相应的外边界,与包含块对应的内边距边界(注意:不是内容边界)的距离,而不是偏移量。如图 5‑18 所示:
图5-18 绝对定位元素的偏移
如果一个 absolute 元素没有显式定义宽度,则它的宽度就由 left 和 right 属性决定。如果将 left 和 right 同时设置为 0,它的宽度就等于包含块的宽度;如果将 left 或 right 设置为正值,就会将它向包含块的内部压缩,宽度随之减少 left 或 right 属性指定的宽度;如果将 left 或 right 设置为负值,就会将它向包含块的外部拉伸,并延伸到包含块的外部,宽度随之增加 left 或 right 属性指定的宽度。同理,如果没有显式定义高度,就可以设置 top 和 bottom 让它垂直拉伸。因此,如果同时设置 left: 0; right: 0; top: 0; bottom: 0;,就可以让它与包含块具有相同的尺寸。
还看上一节的例子,如果希望第二个元素在容器 wraper 中使用绝对定位,首先让它的父元素成为已定位的元素,并让第二个元素使用绝对定位。
#wraper {
position: relative;
…
}
#wraper div:nth-child(2) {
top: 20px;
left: 20px;
position: absolute;
}
对于任何元素来说,它的左边界是 margin 区域的左边缘,上边界是 margin 区域的上边缘。本例中,由于第二个子元素有 10px 的外边距,故发生偏移后,它的左边框与 wrapper 元素左边框的距离是 30px,而上边框与 wrapper 元素上边框的距离也是 30px。上边界和上边框同理。得到的结果如图 5‑19 所示:
图5-19 元素绝对定位
如果设置了绝对定位,而没有设置偏移属性,那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离普通流,而仍然希望它保持在原来的位置的情况。由于绝对定位的元素将脱离文档流,这意味着它对其后的兄弟元素没有影响。
无论一个元素在普通流中是块级框,还是行内级框,使用绝对定位后,它都会生成一个块级框。由于绝对定位的元素创建了一个独立的块格式化上下文,因此,尽管绝对定位的元素也可以有外边距,但它不会与其它任何元素发生外边距合并。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
CSS 元素的绝对定位 position: absolute 和 position: fixed相关推荐
- HTML之position:absolute relative static fixed的区别和理解
HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时,我们先需要 ...
- 区分position:relative; position:absolute; position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...
- 工作383:css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))...
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的. 正确的是:只要父级元素设了p ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- CSS 有关Position = absolute (绝对定位 是相对于谁而言)
css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位. 现在搞清楚了,不是相对于父元素,也不是相对于BODY. 而是相对于所属元素树中,相邻最近的那个显示标识了position属性的元 ...
- html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素...
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...
- css position:absolute 父元素高度塌陷
问题 在使用iSroll v4插件时,无法滚动到底部,从源码得知最大滚动位置由maxScrollY决定.从源码摘录出计算maxScrollY的部分 that.wrapperH = that.wrapp ...
- css深入浅出系列之:绝对定位 position:absolute
css深入浅出系列只是自己在学习css的时候的一些个人见解,有错误的地方,欢迎在评论中指正噢~ 今天主要在以下几个方面来展开: 1.什么是绝对定位 2.如何确定绝对定位元素的定位点 3.absolut ...
- css position的父级,css position absolute 相对于父元素的设置方式
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角. 有时候我们需 ...
最新文章
- 《C语言程序设计:问题与求解方法》——1.4节本章习题
- Qt Creator编辑2D内容
- UESTC 1851 Kings on a Chessboard
- Leetcode 206. Reverse Linked List
- 4-1 可复用性概述
- 数据库MySQL--常见基础命令
- python selenium自动化框架_一文讲透!实现一个Python+Selenium的自动化测试框架如此简单!...
- 2020美赛F题翻译
- 解决java下载文件中文文件名乱码问题(ie,谷歌,火狐)
- 从两幅图像的匹配点计算焦距f
- 丈夫三次“买凶杀妻” 妻子毫无所觉称婚姻甜蜜
- windows10加域/退域
- .Net Core 登陆验证
- OpenSSL环境搭建(WIN10+VS2017)
- 监控系统与视频会议系统两者的区分
- 使用MSF进行提权(windows提权、linux提权、wesng使用)
- 公众号文章链接被微信拦截(被封锁、被屏蔽、被和谐)的最新解决方法
- 特斯拉发布电动卡车:5秒破百 续航达800公里! | 行业
- ASP.NET 开发
- 关于antispy反间谍软件的研究
热门文章
- ajax post 请求 一直提示 404 not found textStatus error
- Java 联系Oracle 数据库
- Python运维插件——psutil
- 通过yum安装Nagios
- PrestaShop物流跟踪模块
- 单元测试工具 Numega
- 解决SQL Server 2005 Express中无法连接到服务器问题
- 【设计模式系列】行为型之责任链模式
- idea普通java项目引入lombok_IDEA中Lombok的使用
- [java] DOS编译 .java 文件得到 .class 文件 并执行 以及使用外部 .jar包 时的命令...