失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css定位属性详解(position属性)

css定位属性详解(position属性)

时间:2020-12-14 21:25:42

相关推荐

css定位属性详解(position属性)

一、定位属性

1、定位属性

属性:position

取值:

1、static

默认值,默认定位方式

2、relative

相对定位

3、absolute

绝对定位

4、fixed

固定定位

注意:position取值为 relative,absolute,fixed 的元素被称为 已定位元素

2、偏移属性

作用:移动已定位元素

属性:

top:值;

bottom:值;

left:值;

right:值;

3、堆叠顺序

属性:z-index

取值:无单位数值

二、定位方式-相对定位

1、什么是相对定位

元素会相对于它原来的位置偏移某个距离

元素移动位置后,原来所占据的空间依然会保留

2、使用场合

位置微调

3、语法:

属性:

position:relative;

配合着 偏移属性 实现位置的移动

三、定位方式-绝对定位

1、绝对定位的特征

1、元素会脱离文档流

2、相对于 最近的 已定位的祖先元素 来实现位置的初始化

3、如果元素没有已定位祖先元素,那么它的位置就相对于最初的包含块(body,html)

2、语法

属性:

position:absolute;

配合着 偏移属性 实现位置的初始化或移动

3、绝对定位使用场合

弹出菜单

4、注意

1、绝对定位的元素会变成块级

2、绝对定位的元素可以使用 margin来改变位置,但是 margin:auto 会失效

四、堆叠顺序

1、作用

处理 已定位元素的 堆叠效果 (z-index必须配合position属性使用)

2、默认堆叠效果

1、平级元素-后来者居上

2、子元素压在父元素之上-子压父

3、属性

z-index

取值:数值越大越靠上

4、注意

1、取值可以为负

取值为负时,当前元素会位于页面正常显示内容之下

2、z-index 是无法改变父子关系的堆叠顺序

五、固定定位

1、什么是固定定位

将元素固定在网页的某个位置处

不会随着滚动条而发生位置的变化

2、语法

position:fixed;

配合 片以属性 改变元素位置

3、注意

固定定位永远都是相对于浏览器窗口进行位置初始化的。

如果觉得《css定位属性详解(position属性)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。