©2016-2025 Matools All rights reserved,
粤ICP备17059708号
相对定位
CSS position属性用于指定一个元素在文档中的定位方式。
top ， right ， bottom 和 left 属性则决定了该元素的最终位置。
如下：未定位前的位置在定位后的位置左面50px。
.box1{ position:relative;/*relative = 相对的意思*/ left:50px; }
特性
* 不使元素脱离文档流 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流自身的位置还在 一种不占文档流确实层级比较高
可以理解成占据自己的位置 同时提高了层级
* 不影响元素本身特性，行内还是行内，块级还是块级
* 层级未设置时，后来居上，后面设置的定位层级在上面。
绝对定位
相对于已经定位的父元素进行定位
特性
* 完全脱离文档流
* 行内元素支持宽高
* 块级元素内容撑开宽高，不会超过定位父级边界的临界点
* 没有祖先元素则相对于body
* 一般配合相对定位使用
* 绝对定位的元素的位置相对于最近的已定位祖先元素
* margin:auto;失效
如何使一个盒子在页面中百分之百居中呢？
第一种方法，先让盒子50%移动，但不是居中，然后用margin再进行微调,-自己宽高的一半
第二种方法，margin当做和事老，距离四个边界一样的高度，但不建议用此骚操作。
/*第一种方法*/ position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;
/*第二种方法*/ margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;
固定定位 fixed
position:fixed;
相对浏览器窗口定位
z-index
层级只有定位元素才有
* z-index 可以调换两个层的上下位置关系
* 值可以为正，也可以为负，值越大，越在上面 默认值=0
* 只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！
* z-index:只对定位的元素有效，其它元素均无效
热门工具 换一换