css详解position五种属性用法及其含义
position（定位）
position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。其属性值有五种，分别是 — static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。
static（正常定位）
static(正常定位) 是元素position属性的默认值，包含此属性的元素遵循常规流[1]。
正常定位呈现常规流的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>正常定位呈现常规流的示例</title>
<style type="text/css">
* {
margin: 12px;
background-color: white;
}
.block {
background-color: #f00;
}
.inline {
display: inline;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="block">Fatman</div>
<div class="block">Fatman</div>
<div class="inline">Fatman</div>
<div class="inline">Fatman</div>
<div class="inline">Fatman</div>
<div class="inline">Fatman</div>
</body>
</html>
正常定位呈现常规流的示例效果图：
当元素的position属性值为static时，元素的top、right、bottom、left、z-index属性都不会生效。
元素正常定位未添加top、right、bottom、left属性的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>元素正常定位未添加top、right、bottom、left属性的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
div {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
元素正常定位未添加top、right、bottom、left属性的示例效果图：
元素正常定位且添加top、right、bottom、left属性的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>元素正常定位且添加top、right、bottom、left属性的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
div {
top: 120px;
right: 120px;
bottom: 120px;
left: 120px;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
元素正常定位且添加top、right、bottom、left属性的示例效果图：
元素正常定位下，无论有无添加top、right、bottom、left属性，红色背景的div元素相对于body元素的边框都没有任何的位置变化，由此可以说明当元素的position属性值为static时，元素的top、right、bottom、left属性值不会生效。
正常定位的元素与相对定位的元素重叠的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>正常定位的元素与相对定位的元素重叠的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
div {
width: 100px;
height: 100px;
}
#static {
position: static;
background-color: #f00;
z-index: 999;
}
#relative {
position: relative;
top: -100px;
left: 0;
background-color: #ff0;
z-index: 1;
}
</style>
</head>
<body>
<div id="static"></div>
<div id="relative"></div>
</body>
</html>
正常定位的元素与相对定位的元素重叠的示例效果图：
ID为static的元素的z-index属性值明显高于ID为relative的元素。同理，在z轴，ID为static的元素应该比ID为relative的元素更靠近用户，事实上却是ID为relative的元素更靠近用户。
正常定位的元素与相对定位的元素重叠，但相对定位的元素的z-index值小于0时的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>正常定位的元素与相对定位的元素重叠，但相对定位的元素的z-index值小于0时的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
div {
width: 100px;
height: 100px;
}
#static {
position: static;
background-color: #f00;
z-index: 999;
}
#relative {
position: relative;
top: -100px;
left: 0;
background-color: #ff0;
z-index: -1;
}
</style>
</head>
<body>
<div id="static"></div>
<div id="relative"></div>
</body>
</html>
正常定位的元素与相对定位的元素重叠，但相对定位的元素的z-index值小于0时的示例效果图：
将ID为relative的元素的z-index属性值修改负数后，在z轴ID为static的元素比ID为relative的元素更靠近用户,结合ID为relative的元素的z-index属性值为正数的情况，得出position属性值为static时，元素的z-index是不会受到设置值影响的[2]。
relative（相对定位）
postion属性值为relative(相对定位) 的元素在不设置top、right、bottom、left这些属性时，其自身在文档中的定位效果与static并无区别，但加上top、right、bottom、left这些属性后，便会相对于自身在常规流中的位置进行定位。
在上文中阐述static时用到的ID为relative的元素用的就是相对定位，从其对应的效果图可以看出，虽然元素中含有值为-100px的top属性，将元素显示的位置相对于自身在常规流中的位置往上移动了100像素，但其自身在常规流中的位置仍然保留。
ID为relative的元素在常规流中的位置仍然保留的示例效果图：
相对定位的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>相对定位的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
div {
width: 100px;
height: 100px;
position: relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: black;
top: 100px;
left: 100px;
}
#div3 {
background-color: gray;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
相对定位的示例效果图：
这里三个元素盒子都是用的相对定位：红色盒子因为没有设置top、right、bottom、left属性，其定位在自身在常规流中的位置；黑色盒子因为包含值均为100px的top和left两属性，所以其定位在相对于自身在常规流先靠下100像素，再靠右100像素的位置上；灰色盒子和红色盒子一样，没有设置top、right、bottom、left属性，但因黑色盒子在常规流中的位置仍然保留，所以灰色盒子所占位置并没有紧靠在红色盒子的下方，而是出现在距离红色盒子底部100像素的位置上。
absolute（绝对定位）
absolute（绝对定位）与relative（相对定位）之间的区别是：relative（相对定位）并没有脱离文档流，而absolute（绝对定位）脱离了文档流；relative（相对定位）相对于自身在常规流中的位置进行偏移定位，而absolute（绝对定位）相对于离自身最近的定位祖先元素的位置进行偏移定位。
先解释何为脱离常规流，笔者将正常定位呈现常规流的示例html代码略作修改，得到：
绝对定位脱离常规流的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>绝对定位脱离常规流的示例</title>
<style type="text/css">
* {
margin: 12px;
background-color: white;
}
.block {
background-color: #f00;
}
.inline {
display: inline;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="block">Fatman</div>
<div class="block" style="position: absolute;">Fatman</div>
<div class="inline">Fatman</div>
<div class="inline" style="position: absolute;">Fatman</div>
<div class="inline">Fatman</div>
<div class="inline">Fatman</div>
</body>
</html>
绝对定位脱离常规流的示例效果图：
从效果图中可以看出，添加了position属性值为absolute的块级元素并没有按预期独占一行，且同样添加了position属性值为absolute的行内元素也并没有按预期在每行中按从左至右的顺序依次排放元素。并且因为笔者没有给两个使用绝对定位的元素设置top、right、bottom、left属性，所以布局有种说不上来的诡异。
再说何为定位祖先元素：比如相对定位的元素中是相对于在常规流中的位置进行偏移定位，top、right、bottom、left属性的参考系是元素在常规流中的位置，而在绝对定位的元素中的参考系就是定位祖先元素。拥有相对定位属性值的祖先元素可以充当拥有绝对定位属性值的子孙元素的定位祖先元素。如果子孙元素没有定位祖先元素，会一直回溯到body元素，使用body元素充当自己的定位祖先元素。
相对定位元素充当绝对定位元素的定位祖先元素实现垂直水平居中的示例html代码：
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>相对定位元素充当绝对定位元素实现垂直水平居中的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: #ff0;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: #f00;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
相对定位元素充当绝对定位元素的定位祖先元素实现垂直水平居中的示例效果图：
红色盒子（绝对定位元素）在其定位祖先元素黄色盒子（相对定位元素）中垂直水平居中。
body充当绝对定位元素的定位祖先元素实现垂直水平居中的示例html：
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>body充当绝对定位元素实现垂直水平居中的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
.center {
position: absolute;
width: 100px;
height: 100px;
background-color: #f00;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
body充当绝对定位元素的定位祖先元素实现垂直水平居中的示例效果图：
红色盒子（绝对定位元素）在其定位祖先元素body中垂直水平居中。
fixed（固定定位）
fixed（固定定位）和absolute（绝对定位）很像，但也有两点不同：absolute（绝对定位）相对于定位祖先元素进行偏移定位，而fixed（固定定位）相对于窗口进行偏移定位；absolute（绝对定位）的定位祖先元素可以是相对定位的元素，而fixed（固定定位）的定位祖先元素只能是窗口。
固定定位实现垂直水平居中的示例html代码：
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>固定定位实现垂直水平居中的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
height: 1000px;
}
.center {
position: fixed;
width: 100px;
height: 100px;
background-color: #f00;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
固定定位实现垂直水平居中的示例效果图：
尽管上下滑动，却不会影响到红色盒子（固定定位元素）在视窗中垂直水平居中。
相对定位元素企图充当固定定位元素的定位祖先元素实现垂直水平居中的示例html代码：
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>相对定位元素企图充当固定定位元素的定位祖先元素实现垂直水平居中的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 12px;
}
.parent {
position: relative;
width: 300px;
height: 300px;
background-color: #ff0;
}
.son {
position: fixed;
width: 100px;
height: 100px;
background-color: #f00;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
相对定位元素企图充当固定定位元素的定位祖先元素实现垂直水平居中的示例效果图：
相对定位元素并不能作为固定定位元素的参照物。
sticky（粘性定位）
sticky（粘性定位）类似relative和fixed的结合，当元素设置position属性为sticky时，如果top、right、bottom、left四个属性都不设置具体值，sticky（粘性定位）不会生效，其表现效果与static一致[3]。
当在top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态 — 类似relative（相对定位状态）和类似fixed（固定定位状态）。以top:10px为例 ：当元素相对于窗口顶部的距离大于10px时，元素处于类似relative（相对定位状态），一旦元素相对于窗口顶部的距离小于或等于10px时，元素立马切换到类似fixed（固定定位状态）
粘性定位的示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>粘性定位的示例</title>
<style type="text/css">
body {
border: 1px solid black;
padding: 32px;
margin: 32px;
height: 1000px;
}
div {
width: 100px;
height: 100px;
position: relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: black;
position: sticky;
top: 100px;
left: 100px;
padding: 0;
margin: 0;
}
#div3 {
background-color: gray;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
粘性定位的示例效果图：
在上下滚动视窗时，设置了粘性定位的黑色盒子会随着视窗一起滚动，直到触发条件top:100px，便“粘住”在距离窗口顶部100像素的位置上。
不过这里有两点需要注意：
1.当粘性定位的元素处于类似relative（相对定位状态）时，它并不是单纯的相对于自身在常规流中的位置进行的偏移定位；
2.当粘性定位的元素处于类似fixed（固定定位状态）时，它在常规流中的位置仍然保留。
关于第一点，当粘性定位的示例中黑色盒子的left属性值小于等于65像素（32px + 32px + 1px）时，黑色盒子都位于其在常规流的位置上，而当粘性定位的示例中黑色盒子的left属性值大于65像素（32px + 32px + 1px）时,黑色盒子将相对于其在常规流的位置的（left设定值减去65像素）进行定位。
关于第二点，当黑色盒子“粘住”时，红色盒子与灰色盒子之间的间隙并没有消除，由此得出黑色盒子在常规流中的位置仍然保留。
尾言
笔者才疏学浅，如有错误之处，还望不吝赐教。
css详解position五种属性用法及其含义的更多相关文章
- Redis数据结构详解，五种数据结构分分钟掌握
redis数据类型分为:字符串类型.散列类型.列表类型.集合类型.有序集合类型.redis这么火,它运行有多块?一台普通的笔记本电脑,可以在1秒钟内完成十万次的读写操作.原子操作:最小的操作单位,不能 ...
- 理解css 中的position五个属性
在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试 一般的在w3c中我们可以很容易的获取定义: static : 默认值.没有定位,元素出现在正常的 ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- 详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- 前端技术之_CSS详解第五天
前端技术之_CSS详解第五天 一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的. <!DOCTYPE html ...
- DIV+CSS详解
DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- SSE技术详解：一种全新的HTML5服务器推送事件技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
随机推荐
- CURTIS SAVANAH：数字经济=智能基础设施+海量数据+新生业态
前不久,Datahero Inc公司(公司编号:20141166945)创始人CURTIS SAVANAH在会议上表示,要构建数字经济的愿景,需要智能基础设施.海量数据和全新新生业态. 他在演讲中说到 ...
- 详解支付体系颠覆者NGK公链：如何通过呼叫河马智能合约加速转账？
纵观全球加密货币市场,至今为止,全球已经发行的加密货币以及数字代币的数量已经超过了7000种,且未来还将会有更多的加密货币或数字代币出现.在众多加密货币项目中,投资者很难在众多的项目里甄别项目的好坏以 ...
- lock free（无锁并发）是什么
一.非阻塞同步(Non-blocking Synchronization) 1. 无锁编程 / lock-free / 非阻塞同步 无锁编程,即不使用锁的情况下实现多线程之间的变量同步,也就是在没有线 ...
- 消息中间件选型分析:从 Kafka 与 RabbitMQ 的对比看全局
本文转载自消息中间件选型分析:从 Kafka 与 RabbitMQ 的对比看全局 前言 消息队列中间件(简称消息中间件)是指利用高效可靠的消息传递机制进行与平台无关的数据交流,并基于数据通信来进行分布 ...
- Vue学习笔记-vue-element-admin 按装报错再按装
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Bitter.NotifyOpenPaltform : HTTP 异步消息接收调度中心--开源贡献 之 一：简介
现在互联网的系统越来越趋向于复杂,从单体系统到现在的微服务体系演变.公司与公司的分工也越来越明确. 大数据公司提供了大数据服务 人脸识别公司提供了人脸识别服务 OCR 公司提供了专业的OCR 服务 车 ...
- 【HTB系列】靶机Vault的渗透测试详解
出品|MS08067实验室(www.ms08067.com) 本文作者:大方子(Ms08067实验室核心成员) Kali: 10.10.14.213 靶机地址:10.10.10.109 先用nmap探 ...
- RabbitMQ(二) Java使用RabbitMQ
2-1 RabbitMQ 生产者消息发送 创建 Maven 项目 Send 加入依赖 <dependency> <groupId>com.rabbitmq</groupI ...
- 关于Java高并发编程你需要知道的“升段攻略”
关于Java高并发编程你需要知道的"升段攻略" 基础 Thread对象调用start()方法包含的步骤 通过jvm告诉操作系统创建Thread 操作系统开辟内存并使用Windows ...
- 绿色城市之地下综合管廊3D可视化平台
前言 现阶段,我国绿色城市建设发展正在热火朝天的进行,面对迅速城镇化建设导致的城市病,需要不断寻求足以丰富城市的资源,以此实现城市绿色化智能化发展,比如改造地下管廊.路灯等城市基础设施. 地下综合管廊 ...