Position定位
Position定位
CSS
中position
属性是比较常用的元素定位方案,position
常用的取值有static
、relative
、absolute
、fixed
、sticky
、inherit
。
static
static
属性是HTML
元素的默认值,即没有定位,遵循正常的文档流对象,对于top
、bottom
、left
、right
、z-index
属性的设置都被忽略。
文档流,指的是盒子元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
文本流,指的是文字元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
<div class="t1">static</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t1{
position: static;
}
</style>
relative
relative
是相对定位,元素的位置是相对其原本位置进行偏移,其不脱离文档流,对于top
、bottom
、left
、right
、z-index
属性的设置有效,设置偏移属性后会移动相对定位元素,但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块。
<div class="t2">relative</div>
<div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t2{
position: relative;
bottom: -10px;
}
</style>
absolute
absolute
是绝对定位,元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
,通常的使用方案是在外层嵌套一层relative
相对定位元素作为父元素,再设置绝对定位元素的偏移将会相对于外层的relative
元素进行偏移,绝对定位完全脱离文档流与文本流,不占据文档空间,对于top
、bottom
、left
、right
、z-index
属性的设置有效。
<div class="t3">
<div class="t4">absolute</div>
</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t3{
height: 300px;
position: relative;
}
.t4{
position: absolute;
top: 100px;
}
</style>
fixed
fixed
是固定定位,元素的位置相对于浏览器窗口是固定位置,即使是窗口滚动元素也不会移动,注意在<iframe>
中的元素使用fixed
是相对于<iframe>
进行定位的,<iframe>
类似于在页面中创建了一个新的浏览器窗口,固定定位完全脱离文档流与文本流,不占据文档空间,对于top
、bottom
、left
、right
、z-index
属性的设置有效。
<div class="t5">fixed</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t5{
position: fixed;
top: 300px;
}
</style>
sticky
sticky
是粘性定位,元素的位置是基于用户的滚动位置来定位,粘性定位的元素是依赖于用户的滚动,在position: relative
与position: fixed
定位之间切换,在页面显示时sticky
的表现类似于position: relative
,而当页面滚动超出目标区域时sticky
的表现类似于position: fixed
,它会固定在目标位置,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位,这个特定阈值指的是top
、right
、bottom
、left
其中之一,必须通过指定top
、right
、bottom
、left
四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同。
<div class="t6">sticky</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t6{
position: sticky;
top: 0;
}
</style>
inherit
inherit
是通过继承父元素的position
值来进行定位。
<div class="t7">
<div class="t8">inherit</div>
</div>
<style type="text/css">
div{
border: 1px solid #eee;
}
.t7{
position: relative;
}
.t8{
position: inherit;
bottom: -10px;
}
</style>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
div{
border: 1px solid #eee;
margin: 5px 0;
}
.t1{
position: static;
}
.t2{
position: relative;
bottom: -10px;
}
.t3{
height: 300px;
position: relative;
}
.t4{
position: absolute;
top: 100px;
}
.t5{
position: fixed;
top: 300px;
}
.t6{
position: sticky;
top: 0;
}
.t7{
position: relative;
}
.t8{
position: inherit;
bottom: -10px;
}
</style>
</head>
<body>
<div class="t1">static</div>
<div class="t2">relative</div>
<div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
<div class="t3">
<div class="t4">absolute</div>
</div>
<div class="t5">fixed</div>
<div class="t6">sticky</div>
<div class="t7">
<div class="t8">inherit</div>
</div>
<div style="height: 1000px">让浏览器出现滚动条</div>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.zhihu.com/question/21911352
https://www.runoob.com/css/css-positioning.html
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow
- 使用Identity Server 4建立Authorization Server (5)
- 多库多事务降低数据不一致概率
- 利用Python实现DGA域名检测
- 一个“爆款”成功的API,都离不开这8条设计准则
- RavenDb学习(八)高级特性上半部分
- 微信钱包中58到家首页为什么这么快
- hbase源码系列(二)HTable 探秘
- hbase源码系列(三)Client如何找到正确的Region Server
- hbase源码系列(五)Trie单词查找树
- 如何在特定的渗透测试中使用正确的Burp扩展插件
- hbase源码系列(十一)Put、Delete在服务端是如何处理?
- 大数据如何帮飞机节油?
- hbase源码系列(十二)Get、Scan在服务端是如何处理?
- OpenStack:建立虚拟的渗透测试实验环境 – 网络篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法