relative

相对定位不脱离文档流提升层叠性

定位参考元素：元素在文档流中的位置

用途：提升层叠性作为绝对定位元素的相对父级

absolute

脱离文档流和文本流（会覆盖文字）提升层叠性绝对定位的默认宽高是内容决定的，可以设置宽高和盒模型

定位参考元素：祖先元素中，离他最近设置了定位属性作为参考元素，如果没有找到会参考根元素

元素的居中定位:

1，先向右偏移容器的一般的宽度，再向左偏移定位元素宽度的一般，反向同理

2，position:absolute

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

不进行偏移，让margin去计算，实现居中另外没有设置宽高的元素可以使用偏移值设置宽高，可以实现占满父级包裹元素

固定定位：定位参考元素：浏览器的内容可视区域

堆叠问题：就近原则

定位元素会产生层次级，默认情况，后面的元素堆在上面

z-index（ z轴的堆叠顺序）数值越大，越在上面（可以设置负值）

left: 正值(元素相对与参考元素左边向右偏移) 负值(元素相对与参考元素左边向左偏移)

top: 正值(元素相对与参考元素顶边向下偏移) 负值(元素相对与参考元素顶边向上偏移)

right:正值(元素相对与参考元素右边向左偏移) 负值(元素相对与参考元素右边向右偏移

bottom:正值(元素相对与参考元素底边向上偏移) 负值(元素相对与参考元素底边向下偏移

同一个方向: 水平方向left优先生效,没有left,right 才会生效

垂直方向 top 优先生效,没有top,bottom才会生效

可以用绝对定位实现

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。