16、定位

postion属性 实现定位

相对定位 relative

绝对定位 absolute

相对定位

相对自己原来的位置进行偏移

格式： position:relative 设置【top left right bottom】的值来进行便宜

注意：1.相对定位不会脱离标准文档流，会继续在标准流中占有一份空间

2.由于相对定位不脱离文档流，所以为相对定位额的元素添加内外边距 会影响到标准流的布局

应用场景：对于元素的微调

绝对定位

绝对定位一般情况下 相对于body来定位

绝对定位的参照点

1.默认情况下，所有的绝对定位元素，无论有没有祖先元素都会以body作为参照点

2.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流【绝对/相对/固定】

那么这个元素的绝对定位的元素会以 最近的那个祖先元素作为参考点

注意：1.绝对定位脱离了标准文档流

2.绝对定位的元素 不区分 行级/块级/行内块级

1.相对定位的弊端：相对定位不会脱离文档流 会继续在标准流中占有一份空间 不利于页面的布局

2.绝对定位的弊端：默认情况下绝对定位的元素会以body作为参考点 所有会随着浏览器的变化而变化

秘籍：子绝父相

这个简单理解的话，有2点内容

第一，不管是什么，既然要定位，就需要有一个参照物

相对定位的参照物是本身。

绝对定位的参照物就是父级元素，当父级元素中不存在相对定位，那么它的参照物就是body

第二，产生的影响

相对定位，设置后，原来的位置始终保留着

绝对定位，设置后，原来的位置会被后面的内容占据

一般使用的话，看你需要实现什么样的效果，但基本基于上面2点内容来考虑。你稍微用几次后就会有所体会的

让绝对定位的元素始终居中

div{

height: 500px;

width: 500px;

border: 1px solid #000;

margin: 0px auto;

position: relative;

}

img{

position: absolute;

left:50%;

margin-left:-12px;

}

left=50%

margin-left=-元素的宽度的一半；

<div>

<img src="img/hot.png" alt="">

</div>

固定定位

格式 ： postion:fixed

（类似于浮动的小图片）

img{

position: fixed;

}

1<br>

1<br>

1<br>

<img src="img/yanzhengma.jpg" alt="">

1<br>

1<br>

1<br>

静态定位

我们之前写的盒子默认的位置 就是静态定位