HTML元素定位方式——相对定位、绝对定位、固定定位、浮动定位

水深无声 2021-09-20 15:32 795阅读 0赞

布局排版是网页设计的基础，熟练使用各种定位写起网页来会更得心应手。

## **静态定位** ##

当添加一个HTML元素，不设置定位方式默认为静态定位（position：static），静态定位属于**文档流**（排列方式就像文本，一行一行排列，文字多出会换行）。

## **相对定位** ##

相对定位（position：relative）是相对于自己之前的位置进行定位，如果不改变top、bottom、left、right与文档流元素无差别。

ps：小技巧，在调整网页的细节时，常常将父元素的定位设置为相对定位，子元素设置绝对定位（子绝父相）。

## **绝对定位** ##

绝对定位（position：absolute）是相对上级相对定位元素或绝对定位元素进行定位，如果上级元素没有设置定位，则会相对于body进行定位。

<table style="width:500px;">  
 <strong>特点对比</strong>  
 <tbody> 
  <tr> 
   <td style="text-align:center;width:203px;"><strong>相对定位</strong></td> 
   <td style="text-align:center;width:296px;"><strong>绝对定位</strong></td> 
  </tr> 
  <tr> 
   <td style="width:203px;">不脱离文档流</td> 
   <td style="width:296px;">脱离文档流</td> 
  </tr> 
  <tr> 
   <td style="width:203px;">元素仍占据文档流空间</td> 
   <td style="width:296px;">元素不占据文档流空间</td> 
  </tr> 
  <tr> 
   <td style="width:203px;">可以撑起父元素</td> 
   <td style="width:296px;">不可以撑起父元素</td> 
  </tr> 
  <tr> 
   <td style="width:203px;">相对于自己定位</td> 
   <td style="width:296px;">相对上级相对或绝对定位元素进行定位</td> 
  </tr> 
 </tbody> 
</table>

## **固定定位** ##

固定定位使用（position：fixed），相对于浏览器窗口进行定位，脱离标准文档流，界面滚动，元素位置不变。

## **浮动定位** ##

float：right或float：left，浮动定位脱离标准文档流，被浮动的元素会向左靠，或向右靠，空间不足时会换行。通常使用用浮动定位后要清除浮动，常用方法是设置clear属性（设置为both、right、left）或者使用伪元素。

想了解作者更多，请移步我的个人网站，欢迎交流、留言~  
极客技术空间：https://elltor.com/