位置:首页 > 软件操作教程 > 编程开发 > CSS > 问题详情

CSS中定位方式position 有哪些?

提问人:刘旭39发布时间:2020-11-06

定位方式position

定位的思想很简单,允许定义元素相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS使用position属性控制定位类型,并配合4个定位偏移属性:left\right\top\bottom控制偏移量

基本语法

position:static|relative|absolute|fixed|center|page|sticky;

语法说明

static:静态定位,遵循正常文档流,是所有元素默认的定位方式,此时4个定位偏移属性不会被应用。一般不特别设定,除非要取消继承其他元素的特别定位。

relative:相对定位,遵循正常文档流,基准位置为其正常文档流中的位置,并通常需要top、bottom、left、right,属性配合完成,设定元素相对于原来位置的偏移量。设置为相对定位的元素,会偏移某个距离,元素仍然保持其为偏移前的形状它原来所占的空间仍保留,元素移动后可能会覆盖其他元素

absolute:绝对定位设置为绝对定位的元素,从文档流中删除元素,原先在文档流中所占的位置会取消,不再占用原有的空间,绝对定位“相对于”该元素,最近的已经定位的祖先元素,若不存在,一定会的,祖先元素咋一直回溯到body元素。绝对定位的盒子偏移位置,不影响常规文档流中的任何元素

fixed:固定定位与absolute一致,偏移量定位一般以窗口为参考,当出现滚动条时,对象不会随着滚动元素原有位置空间不保留,对象脱离常规流

center:CSS 3,新增关键字与absolute 一致,偏移量定位以祖先元素的中心点为参考,盒子在其包含容器中垂直水平居中,盒子的偏移位置不影响常规流中的任何元素。对象脱离常规流,目前主浏览器均不支持该属性值。

page:CSS 3新增关键字与absolut元素,在分页媒体获区域块内,元素包含始终是初始包含块,否则取决于每个absolute模式

sticky:CSS 3新增关键字对象在常态时遵循常规流也就是当对象在屏幕中正常显示时,按照常规流排版,当卷动到屏幕外,则表现如fixed,该属性的表现就是现实中我们常见到的吸附效果image.png

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部