CSS使用中,父元素相对定位,子元素绝对定位

2,037 阅读1分钟

 在编写前端页面时,发现总会存在父元素标签包裹子元素标签时,父元素使用postion:relative相对定位,而子元素是postion:absolute绝对定位,这是为什么呢?

绝对定位绝对定位的参照对象是“离他最近的已定位的祖元素”,当然不限于只有父元素,还可以是它的爷爷等等,如果它的祖先里同时有2个及以上的定位元素,就参照离它最近的最近的一个元素定位还有一个是“已定位”“已定位”,这个定位也不一定非要是相对定位,也可以是绝对定位。那么为什么一般都是设置父元素相对定位呢?

  1. 绝对定位不占位置,可以悬浮在表面。
  2. 相对定位是占位置的,它的特性是虽然它定位了,就算给了偏移量它离开了原来的地方,但是它原来占的地方也不会让出来的,这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套,所以用相对定位是非常合适的
  3. 为了让子元素设置绝对定位时,根据父元素去定位。
<!doctype html>
<html>
<head>
 <meta charset="utf-8">
<style>
.father{postion:relative}
.son{postion:absolute}
</style>
</head>
 <body>
   <div class="father">
   <div class="son"></div>
   </div>
 </body>
</html>