定位之绝对定位

1.定位之绝对定位

绝对定位的特点:

position: absolute

脱离文档流

在不设置参照物时，参照物是body

人为设置参照物时，必须满足两个条件

这个参照物必须是绝对定位元素的父级元素

这个父级元素必须带有定位属性(相对、绝对、固定)

当绝对定位这个元素设置宽高为100%，继承的是参照物的宽高

当绝对定位这个元素不设置四个方向值时，这个绝对定位元素的前面有其他平级(同级)元素，默认会排在这个平级元素的后面

在不设置宽高时，宽高是由内容决定的

当绝对定位时，同时设置left/right/top/bottom值时，left和top值生效

参考物查找情况:

祖先元素没有定位参考点

定位参照物先找最近的上一级祖先元素，上一级祖先元素没有定位属性，则继续网上查找，直到找到body为止；

祖先元素有定位的参考点

定位参照物先找最近的上一级祖先元素，上一级祖先元素有定位属性，则上一级有定位属性的祖先元素就是参照物

实战: 始终水平垂直居中

绝对定位，上和左50%,再利用margin反向移动宽高的一半

绝对定位，上和左50%,再利用translate反向移动宽高的一半

绝对定位，四个方向偏移量为0，然后margin设置为auto

1.绝对定位，上和左50%,再利用margin反向移动宽高的一半

.black{width: 500px;height: 500px;background: black;position: relative}

.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;margin: -100px 0 0 -100px;}

2.绝对定位，上和左50%,再利用translate反向移动宽高的一半

.black{width: 500px;height: 500px;background: black;position: relative}

.red{width: 200px;height: 200px;background: red;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}

3.绝对定位，四个方向偏移量为0，然后margin设置为auto

.black{width: 500px;height: 500px;background: black;position: relative}

2.定位之相对定位

相对定位的特点:

position: relative

不脱离文档流

相对定位的层级要比其他元素层级大(会盖在其他元素之上)

当发生位置改变时，原来的位置还被占用着

参照物: 相对定位元素的定位是相对它自己的正常位置的定位

给绝对定位当参照物来用

当同时设置left和right值时，left值生效。同时设置top和bottom值时，top值生效

应用场景:

当自己改变位置时，又不影响其他元素，可以用相对定位

给绝对定位当参照物来用

配合z-index和top/bottom/left/right一起使用

3.定位元素的异同点

相同点:

1.都可以设置top/bottom/left/right 四个方位，如果同时设置top和bottom，不管值的大小，只听top的，如果同时设置left 和 right，不管值的大小，只听left的；

2.都可以设置z-index的属性，用来改变层级，z-index的值越大，层级越靠上，反之越靠下； '

注意: z-indx一定要和position一起使用，否则不起作用；

区别:

是否脱离正常文档流

绝对定位和固定定位: 会脱离正常的文档流(平行漂浮于元素之上: 重叠)；

绝对定位是会随着滚动条的滚动而滚动

固定定位是固定不动，不会随着滚动条的滚动而滚动

相对定位: 不会脱离正常的文档流；

参照物

绝对定位 : 查找机制： 先找第一层的父元素，如果没有则继续往上查找，直接找到整个浏览器窗口为止，如果上级父元素有定位的参照物，则停止查找；

固定定位 ： 整个浏览器的窗口

相对定位 : 它自己原来本身的位置

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