[华为云在线课程][大话CSS][学习笔记][第6章][CSS定位]

6.1，定位属性

定位属性

定位属性用于设置元素在页面中的位置

使用position属性来表示定位

它的值可以设置为：static、relative、absolute、fixed

默认值为static，表示标准流布局

定位位置

在使用定位属性定位元素位置的时候，可以指定上下左右四个属性来控制元素的位置

top用于设置元素定位时距离上部的偏移距离

bottom用于设置元素定位时距离下部的偏移距离

left用于设置元素定位时距离左侧的偏移距离

right用于设置元素定位时距离右侧的偏移距离

需要注意的是，偏移量可以为负值

层次

可以使用属性z-index设置定位元素的层级，值越大，显示时越是覆盖在其他元素的上边

z-index属性默认值为auto，代表层级与父元素相同

该属性只在position值为absolute时有效

例如：

6.2，相对定位

什么是相对定位

相对定位是指元素相对于标准文档流中的默认位置来进行定位的

当position属性值设置为relative时，开启相对定位模式

相对定位并不会让元素脱离标准流

相对定位不会影响到周围其他元素的排布

实际使用时相对定位一般都是和位置属性一起使用

例如

6.3，绝对定位

什么是绝对定位

相对于除static定位之外的第一个父元素进行定位，如果没有就相对于页面定位

把position属性的值设置为absolute时，代表开启绝对定位模式

被设置为绝对定位的元素会脱离标准流

当多个绝对定位元素出现相互覆盖的情况时，可以使用z-index属性设置层级

绝对定位和相对定位搭配使用

情景：当我们想要让子元素相对于父元素进行绝对定位时，可以在父元素上使用相对定位

CSS

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。