2020-11-19

css定位—绝对定位absolute与相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：选择器 { position: relative; }
特点：

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
   不设定位
   给div1设置相对定位
   因此，相对定位并没有脱标。它最典型的应用是给绝对定位当父盒子的。

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：选择器 { position: absolute; }
特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置。（脱标）
   所以绝对定位是脱离标准流的。
   给div1设置绝对定位
   
   配合使用口诀：子绝父相
   如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。不然子元素就会相对body或浏览器定位产生不好的效果。
   例如：给div2设置绝对定位，没有父级或父级没有设置定位，就会相对body或浏览器定位。
   
   不设置定位
   

div1设置绝对定位，父级不设


父级设置相对定位