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><divstyle="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
Position定位相关推荐
- 元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是 一样的,说到底还是对z-index的理解比较模糊,可以解决问 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 ...
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- css 定位连线_CSS Position(定位)
CSS Position(定位) CSS position属性用来指定元素如何在页面上定位,CSS Position(定位)的方式有以下几种:静态定位(static),绝对定位(absolute),相 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- 教你玩转CSS Position(定位)
目录 CSS Position(定位) static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位 重叠的元素 所有的CSS定位属性
- position定位——让人又爱又恨的属性
关于css中的position这个属性,在使用的时候,有时很强大,有时又让人很无奈. 强大的时候,对于div中的一些小物件不方便使用margin或者padding的时候,给与position:abso ...
- 关于position定位下的各种属性说明!-softbar
在这里详细讲解一下,希望能让更多的新手理解能够合理去理解position定位! 代码如下: .box2:"我"一直没有找到依靠.所以"我"会停靠在浏览器的左上方 ...
最新文章
- 四个月没返校,挂在宿舍的内裤变“鸟窝”,网友:画面太美,不敢面对
- php程序应用实例,PHP教程.应用实例1_php
- 脚本编程语言python语言-python语言是脚本语言吗
- python调用git生成log文件_python解析git log后生成页面显示git更新日志信息
- 若依JAVA开源框架自动生成代码步骤记录-创建子module以及导入子module相关问题
- iOS开发——XML/JSON数据解析
- Object 转 String
- sklearn自学指南(part47)--主成分分析
- 【转】vscode配置C/C++环境
- zabbix mysql pgsql_Zabbix 5.0 监控 PostgreSQL 数据库
- python 系统时间24小时制_Python 日期和时间
- springmvc+mybatis多数据源配置,AOP注解动态切换数据源
- Java 关于类型类、this.getClass()的理解
- 24小时从0到1开发阴阳师小程序
- 什么是分布式操作系统?有哪些优缺点?
- 三、亚马逊产品定价其实就这么简单,一个公式解决
- 扬州大学复试1301软件工程【自制题库个人复习用】
- 7-11 秋天的第一杯奶茶 (20 分)
- 激光SLAM技术总结(3)3D激光SLAM算法原理
- 《白雪歌送武判官归京》古诗鉴赏