Html position（static | absolute | fixed | relative）定位

太过爱你忘了你带给我的痛 2022-03-20 16:12 266阅读 0赞

语法：  
**position :** **static** | **absolute** | **fixed** | **relative**

参数：  
**static :**  无特殊定位，对象遵循HTML定位默认规则  
**absolute :**  绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占  
**relative :**  相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。

<table> 
 <tbody> 
  <tr> 
   <td>positon</td> 
   <td>名称</td> 
   <td>(1)是否将对象脱离文档流</td> 
   <td>(2)偏移参照对象</td> 
   <td>偏移属性</td> 
   <td>(3)原先位置是否会被其他元素占用</td> 
   <td>(4)是否 能通过z-index层叠</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>绝对定位</td> 
   <td>是</td> 
   <td>相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点）</td> 
   <td><a rel="nofollow">left</a>，<a rel="nofollow">right</a>，<a rel="nofollow">top</a>，<a rel="nofollow">bottom</a></td> 
   <td>是</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>相对定位</td> 
   <td>否</td> 
   <td>参照自身初始位置进行偏移</td> 
   <td><a rel="nofollow">left</a>，<a rel="nofollow">right</a>，<a rel="nofollow">top</a>，<a rel="nofollow">bottom</a></td> 
   <td>是</td> 
   <td>否</td> 
  </tr> 
 </tbody> 
</table>

**fixed :**  IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变

知识点说明：

**(1)文档流是文档中可显示对象在排列时所占用的位置，**浏览器解析html时，会按从上到下的顺序，把元素放到相应位置。如[div][]，p占用文档流，他们本身是块级元素（块级元素无论width是否占满网页宽度，都会占用一行），在文档流则从上到下分行显示div和p。

示例1：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div style="width:300px;height:100px;border:1px solid red">我是div标签</div> <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>

[![image][]][image 1]

而如果想让div位置脱离文档流偏移，让解析时，把div脱离文档流，相对左上角原点向右偏移400px，把p放到文档流中，占用div本来的位置，则可以用绝对定位。

示例2：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>     <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>

[![image][image 2]][image_image 2]

这时候我们可以看出，绝对定位后，div偏离了文档流，不再是从上到下显示，而是把div偏移，p标签占用本来的文档流位置。

**(2)偏移参照对象:**

absolute绝对定位的偏移参照物是最近的position非static的父标签。

示例3：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div style="width:900px;height:100px;border:1px solid black;position:absolute;left:100px">我是大div，我根据body向右偏移100px，小div要根据我的左上角原点偏移         <div style="width:300px;height:100px;border:1px solid red;position:absolute;left:400px">我是div标签</div>         <p style="width:300px;height:100px;border:1px solid red">我是p标签</p>     </div>

[![image][image 3]][image_image 3]

大divposition非static（默认是static），可以是absolute，relative，小div都会参照大div定位。

示例4：

如果父标签都是static，则再向上一级找非static的父标签，直到找到body。如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点）

为了显示方便，先放点东东占位吧</br>  
为了显示方便，先放点东东占位吧</br>  
为了显示方便，先放点东东占位吧，大概占了60px了吧</br>

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div style="width:900px;height:100px;border:1px solid black;">我是大div，但我是static，只好让小div根据body定位了         <div style="width:300px;height:100px;border:1px solid red;position:absolute;top:100px;">我是div标签，根据body，向下偏移100px；</div>     </div>

[![image][image 4]][image_image 4]

relative相对定位的参照对象是自己的初始位置。

示例5：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

为了显示方便，先放点东西占位吧。</br>         为了显示方便，先放点东西占位吧。</br>         为了显示方便，先放点东西占位吧。大概占了60px了吧</br>         <div style="width:300px;height:100px;border:1px solid red;">我是div标签，默认static，未进行定位</div>

[![image][image 5]][image_image 5]

示例6、

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div style="width:300px;height:100px;border:1px solid red;position:relative;top:100px">我是div标签，相对定位，根据初始位置向下偏移100px</div>

[![image][image 6]][image_image 6]

(3)原先位置是否会被其他元素占用:

绝对或相对定位后，原先的位置会被其他元素占用，如示例2

(4)是否 能通过z-index层叠:

绝对定位的层可以层叠。

示例7、

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<div style="width:300px;height:100px;background:red;position:absolute;">我是div1，绝对定位，没有设置z-index,虽然高度和div2一样的，但div2会把我覆盖</div>    <div style="width:300px;height:100px;position:absolute;top:50px;background:yellow">我是div2，绝对定位，我能把div2覆盖</div>

[![image][image 7]][image_image 7]

示例8、

<div style="width:300px;height:100px;background:red;position:absolute;z-index:2">我是div1，我的z-index比div2高，所以把div2覆盖</div>     <div style="width:300px;height:100px;position:absolute;top:50px;background:yellow">我是div2，我的z-index是默认值，比div1低</div>

[![image][image 8]][image_image 8]

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[div]: https://www.baidu.com/s?wd=div&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[ContractedBlock.gif]: http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220320/3505ebe3e15043ca9c8af1702b675739.png
[image]: /images/20220320/09531ccdea44475b8f1152ce5ce89b60.png
[image 1]: http://images.cnitblog.com/blog/457805/201303/16124845-a1d6c5e430e2411389ee4a859ae17da2.png
[image 2]: http://images.cnitblog.com/blog/457805/201303/16124850-b8285f6c03074e4db74249609df4169b.png
[image_image 2]: /images/20220320/9765d62a00a04ff7b00411a5bf2f2510.png
[image 3]: http://images.cnitblog.com/blog/457805/201303/16124854-02dc2887b179463588cfff7e15107c0b.png
[image_image 3]: /images/20220320/c4c17fd557244458a096eb3054127f90.png
[image 4]: http://images.cnitblog.com/blog/457805/201303/16124859-5e791048d85a4e6fb612971e5ed1e1d5.png
[image_image 4]: /images/20220320/4b357a7c7ef443339ad0a51bcf5835b0.png
[image 5]: http://images.cnitblog.com/blog/457805/201303/16124903-391c19052c754e29a78db7c9f6505c8b.png
[image_image 5]: /images/20220320/e420ce4fd83a416eb3151e3988ffb78b.png
[image 6]: http://images.cnitblog.com/blog/457805/201303/16124908-d1464d387edf4af180ef0cf6f239db3a.png
[image_image 6]: /images/20220320/7da262cb9bd54d4487d0f94692472320.png
[image 7]: http://images.cnitblog.com/blog/457805/201303/16124913-232ba47f68e549e7a59d021543d39567.png
[image_image 7]: /images/20220320/6d144247daac4fc3893b3451672781ef.png
[image 8]: http://images.cnitblog.com/blog/457805/201303/16124917-4a5ca4c1e36f4423b3d62cacb701c194.png
[image_image 8]: /images/20220320/4dd6443297a94e71a8fc5ca5da2f0618.png
[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485