详解 CSS 绝对定位
基本定义和用法
在 CSS
中,position
属性指定一个元素(静态的,相对的,绝对或固定,以及粘性定位)的定位方法的类型。
当设置 position
属性的值为 absolute
时,生成绝对定位的元素,将该元素从文档流中删除,原来的占位不再存在,并相对于 static
定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- 如果这个父元素是块级元素,包含块则设置为该元素的
border-box
。 - 如果这个父元素是行内元素,包含块则设置为该父元素元素的内容边界。
- 如果元素没有已定位的父元素,那么它的位置相对于
<html>
。
.box {
position: relative;
margin: 0 auto;
padding: 10px;
width: 300px;
height: 200px;
background: rgb(66, 98, 104);
}
.box-item {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
有无定位值的区别
position
为 absolute
的元素如果没有设置 left
, top
等值与 left:0; top:0;
的的效果一样吗?
答案是不一样的,一个没有设置 left
和 right
值的绝对定位的元素就像是一个行内块元素,其表现得依旧在 DOM tree
中,对 margin
等属性敏感,但是其实际宽高已经丢失,如果没有设置高度,则其高度由其中的内容决定。
.box {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
}
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: rgb(68, 155, 172);
}
.box-item {
position: absolute;
width: 20%;
height:20%;
background: rgb(65, 116, 126);
}
对于设置了 left:0; top:0;
的绝对定位的元素,这个元素将会从 DOM 树中脱离,独立于文档流,然后会根据相对于 static
定位以外的第一个父元素进行定位。
所以没有定位值的 absolute
元素可以说是个更加变态(没有实际宽度)的 float
元素(实际占据高度为 0),所以浮动元素干的某些事情绝对定位元素也能做到。
绝对定位元素的百分比定位
CSS
设置绝对定位后 top,bottom
设置百分比定位是按父元素的高度来计算的,同样 left,right
设置百分比定位是按父元素的宽度度来计算的。
.box {
position: relative;
margin: 0 auto;
width: 300px;
height: 200px;
background: rgb(66, 98, 104);
}
.box-item {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
父元素有内边界
如果父元素设置有 padding 值,则子元素定位 top,bottom
设置百分比定位是按父元素的高度 + 垂直内边界来计算的,同样 left,right
设置百分比定位是按父元素的宽度 + 水平内边界来计算的。
/* box-sizing: content-box; */
.box {
position: relative;
margin: 0 auto;
padding: 10px 20px;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
}
.box-item {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
当 box-sizing: border-box;
时,其计算与内边界无关。
父元素有边框
如果父元素设置有 border 值,则子元素定位设置的百分比定位值的计算与边框无关。
/* box-sizing: content-box; */
.box {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
border: 10px solid rgb(117, 141, 145);
}
.box-item {
position: absolute;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
background: rgb(65, 116, 126);
}
当 box-sizing: border-box;
时,如果父元素设置有 border 值,则子元素定位 top,bottom
设置百分比定位是按父元素的高度 - 垂直边框来计算的,同样 left,right
设置百分比定位是按父元素的宽度 - 水平边框来计算的。
绝对定位元素的百分比宽高
绝对定位元素的百分比宽高是相对于其最近的父级别定位元素的 padding-box
的大小来计算的。
/* box-sizing: content-box; */
.box {
position: relative;
margin: 0 auto;
padding: 20px;
width: 200px;
height: 200px;
background: rgb(66, 98, 104);
border: 10px solid rgb(117, 141, 145);
}
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: rgb(68, 155, 172);
}
.box-item {
position: absolute;
top: 0;
left: 0;
width: 20%;
height:20%;
background: rgb(65, 116, 126);
}
当 box-sizing: border-box; 时,依然遵循上面的原则,所以计算绝对定位元素的百分比宽高时,应由 height - border
作为基础。
写在最后
若是文中有什么错误,欢迎大家指正,希望和大家在交流之中共同进步。
详解 CSS 绝对定位的更多相关文章
- 详解CSS的相对定位和绝对定位(讲得很详细)
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- 详解CSS float属性
CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 详解CSS盒模型(转)
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
- 详解CSS display:inline-block的应用(转)
详解CSS display:inline-block的应用 阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-b ...
- 详解CSS float属性(转)
详解CSS float属性 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...
- h5整理--详解css的相对定位和绝对定位
浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
随机推荐
- elasticsearch 基础 —— 索引、更新文档
索引文档 通过使用 index API ,文档可以被 索引 -- 存储和使文档可被搜索 . 但是首先,我们要确定文档的位置.正如我们刚刚讨论的,一个文档的 _index . _type 和 _id 唯 ...
- python列表解析和生成器表达式
列表解析作为动态创建列表的强大工具,值得学习. 列表解析技术之前的状况--函数式编程. lambda.filter(), map() enumerate, sorted, any, all, zip ...
- Envoy的线程模型[翻译]
Envoy threading Model 关于envoy 代码的底层文档相当稀少.为了解决这个问题我计划编写一系列文档来描述各个子系统的工作.由于是第一篇, 请让我知道你希望其他主题覆盖哪些内容. ...
- 在CNN上增加一层CAM告诉你CNN到底关注什么
Cam(Class Activation Mapping)是一个很有意思的算法,他能够将神经网络到底在关注什么可视化的表现出来.但同时它的实现却又如此简介,相比NIN,googLenet这些使用GAP ...
- css: IE没法调整那些使用px作为单位的字体大小
<style type="text/css"> h1{font-size:40px;} h3{font-size:30px;} p{font-size:14xp;} & ...
- Autoit脚本调用pscp上传小程序
linux上传文件用pscp上传相对麻烦,如下写了个脚本方便上传 代码如下: $fileURL=@ScriptDir & "pscp.ini" If (FileExists ...
- 使用stylelint进行Vue项目样式检查
stylelint是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误.拥有超过170条的规则,包括捕捉错误.最佳实践.控制可以使用的语言特性和强制代码风格规范.它支持最新 ...
- java 根据excel模板导出文件
<!--读取excel文件,配置POI框架的依赖--> <dependency> <groupId>org.apache.poi</groupId> & ...
- 【8.0.0_r4】AMS架构与流程分析
AMS主要用来管理应用程序的生命周期,以及其核心组件,包括Activity,Service,Provider,Broadcast,Task等 之前整体架构如下图(O上已经废弃) 新的架构比较直接,简化 ...
- python使用HTMLTestRunner.py生成测试报告
这里我使用的是python selenium webdriver环境,浏览器驱动安装见selenium 1.下载HTMLTestRunner.py:http://tungwaiyip.info/sof ...