admin管理员组文章数量:1611401
文章目录
- 一、position属性值
- 二、属性值详解
- 三、层级z-index
- 四、行内元素转换块元素方法
- 五、设置水平垂直居中
- 六、float浮动于absolute绝对定位区别
一、position属性值
二、属性值详解
- positation:static;
默认属性,不支持top、left等属性
- position:absolute;
1、无父元素或父没有定位
脱离文档流(不会将所在元素位置空下来),处于浏览器第一屏的绝对位置(滚动浏览器会随着移动位置),其他元素会从浏览器开头进行展示
2、父有定位
子盒子相对父盒子位置设置:通常情况父盒子相对定位,不设置top、left等属性,子盒子设置绝对定位,支持top、left等的属性设置,会脱离文档流
- positation:relative;
相对自己原来位置有偏移,会覆盖其他元素位置,原来位置还在。有top、left等属性
positition:relative;
top:100px;
left:100px
注意:上下不同时设置,左右不同时设置
- positition:fixed;
相对于浏览器窗口位置,不会随滚动条移动
- positation:sticky;粘性定位
position:sticky;
top:0px;
滚动到距离屏幕0px位置停止滚动,脱离文档流。
不兼容低版本浏览器,后面学了js后用js来做较好。
注意:
1、对于行内元素,设置position:absolute;可以使其变为块元素,能设置长宽高
2、两个盒子都有定位,后面设置的会覆盖前面设置的盒子,后来者居上
三、层级z-index
z-index 设置层级,值越大,层级越大,越靠上显示,解决多盒子定位问题
1、父子关系中在父盒子中设置z-index层级关系会失效,需要在子盒子上设置z-index为负值让他置底
2、兄弟关系中,可以使用z-index
z-index:10;
四、行内元素转换块元素方法
1、display:block;
2、position:absolute;
3、float:left;
五、设置水平垂直居中
先将盒子移到紧靠坐标轴的右下角,在向左上移动半个盒子的距离
position:absolute;
top:50%;
left:50%
margin-left:-100px; #盒子一半的宽度
margin-top:-100px;
六、float浮动于absolute绝对定位区别
float:半脱离文档流,文字环绕
absolute:全脱离,不会出现文字环绕效果
版权声明:本文标题:08-CSS中的position定位&盒子水平垂直居中 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728603871a1165203.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论