详解CSS position 属性
文章目录
- 一、什么是position?
- 二、static 静态定位(默认)
- 三、absolute 绝对定位
- 3.1 absulote 嵌套用法 同一个父元素
- 3.2 absulote 嵌套用法
- 四、relative 相对定位
- 4.1 relative里边的absolute
- 五、fixed 固定定位
- 5.1 会固定到荧幕中的固定位置，即使滚动页面，也不会发生变化
- 5.2 fixed与其他定位的嵌套使用
- 六、sticky 粘性定位
一、什么是position?
- position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
- 他有以下5个属性值 分别是:
- static静态定位
- absulote绝对定位
- relative相对定位
- fixed固定定位
- sticky粘性定位
在开始讲解之前我们先引入一个css文件，它是预先编译好的css样式，作用是起到一些提示效果。
在head标签加入:
<link rel="stylesheet" href="https://codingstartup.com/assets/css-position/hint.css">
二、static 静态定位(默认)
- HTMl里边所有元素的的position默认值都是static
- 忽略 top, bottom, left, right 或者 z-index 声明，即不支持属性
注意: static会跟随HTML的排版(flow移动）
三、absolute 绝对定位
absolute会固定在所设定的位置，不跟随排版移动
absolute如果在子级，那么它会根据父级的absolute和relative定位，但不会根据父级的static来定位
HTMl+CSS<style>.height{width: 750px;height: 120px;}/* 绝对定位 */.absolute{position: absolute;width: 240px;height: 240px;right: 80px;bottom: 60px;} </style><body><div class="height"></div><div class="absolute"></div> </body>效果:
我们多加几个蓝色的div来看看absolute的位置会不会改变
<body><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><!-- <div class="static"></div> --><div class="absolute"></div> </body>
效果：
- 可以看到absulote的位置并没有发生改变
- 但是当页面出现滚动条的时候，它会随着滚动条移动
3.1 absulote 嵌套用法 同一个父元素
- 如果同一个父元素有相同的absulote的话，他们就会重叠
- 这里为了区分是否重叠，我们把第二个div的right增加l为100
<body><div class="height"></div><div class="absolute"></div><div class="absolute" style="right: 100px;"></div>
</body>
3.2 absulote 嵌套用法
- 如果在absulote的里边写一个absolute，那么里边的absolute则会依据父元素的absolute来定位。如果父元素没有absolute,那么它会一直找上去，直到找到body
- 所以里边的div会再向左偏移80px和向上偏移60px，
<body><div class="height"></div><div class="absolute"><div class="absolute"></div></div>
</body>
四、relative 相对定位
重点：在它里边的absolute元素会根据relative的位置去定位
- relative与satic很相似，都会跟随HTML的排版(flow)移动， 但是它relative相比static多了left、right、top、bottom,
- 虽然relative会跟随HTML的排版移动，但是可以通过这四个值来调整位置
HTML+CSS.relative{position: relative;width: 360px;height: 360px;top: 60px;left: 150px; }<body><div class="height"></div><div class="relative"></div> </body>效果:
4.1 relative里边的absolute
- relative里边的absolute会根据relative来定位
HTML+CSS
/* 绝对定位 */
<style>.absolute{position: absolute;width: 240px;height: 240px;right: 80px;bottom: 60px;}/* 相对定位 */.relative{position: relative;width: 360px;height: 360px;top: 60px;left: 150px;}
</style><body><div class="height"></div><div class="height"></div><div class="relative"><div class="absolute"></div></div>
</body>
效果：
五、fixed 固定定位
5.1 会固定到荧幕中的固定位置，即使滚动页面，也不会发生变化
<style>.fixed{position: fixed;width: 240px;height: 240px;left: 80px;bottom: 60px;}
</style><body><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="fixed"></div>
</body>
5.2 fixed与其他定位的嵌套使用
如果fixed 设定有 left、right、top、bottom属性，即使放在relative与absolute里边，fixed也会根据页面(body)去定位。
如果没有设定它则以文档流方式存在。没有设定left、right、top、bottom属性
HTML+CSS<style>.relative{position: relative;width: 360px;height: 360px;top: 60px;left: 150px;}.fixed{position: fixed;width: 240px;height: 240px;left: 80px;bottom: 60px;} </style><body><div class="height"></div><div class="absolute "><div style="position: fixed;width: 50px;height: 50px;background-color: #000000;"></div></div> </body>效果:
设定left、right、top、bottom属性
<body><div class="height"></div><div class="relative "><div style="position: fixed;width: 50px;height: 50px;background-color: #000000;bottom:100px"></div></div> </body>效果:
六、sticky 粘性定位
- 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
- sticky会在滚动的过程当中贴到顶部，原因是我们将它的top设置为0
详解CSS position 属性相关推荐
- 详解CSS position属性
原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...
- 详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
- 详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
- css定位属性详解（position属性）
一.定位属性 1.定位属性 属性:position 取值: 1.static ...
- css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
- html中position属性默认值,CSS position 属性总结
CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~ 下面是总结内容~ 有疏漏.错误之处敬请指出!o(^▽^)o 一.简介 定义:posi ...
最新文章
- express支持i18n国际化
- android 泰语资源,Android 泰语、缅甸语等复杂语言圈圈问题
- 【bzoj4195】[Noi2015]程序自动分析 离散化+并查集
- C#调用DLL文件时参数对应表
- python中定义一个空的字符串_04python—15种字符串操作
- 英文版Windows2k服务器无法正常返回中文的问题
- perl将字符串时间转换成 epoch time
- Python网络爬虫与信息提取学习
- mysql 没有开启binlog_mysql binlog没有开启数据怎么恢复
- CCM 摄像模组结构组成部分
- JAVA实现Excel照相机功能_Excel如何将工作表转换为图片，并随着数据的变化自动更新？...
- 【每日新闻】工信部部长苗圩：软件是新一代信息技术的灵魂
- 《阅读的方法》读书笔记2-2：遥远的地方
- 三菱PLC slmp（mc）协议
- Asp.Net与SEO – 庞大的反向链接网络(一)
- 阿里云国际版CDN真的这么神奇吗？
- 数学合集——杨子曰数学
- FMI人工智能与大数据高峰论坛-北京站
- 2021年全球与中国医院担架行业市场规模及发展前景分析
- 投影仪玩法多，你知道如何使用