CSS 之 Position定位

Posted 2020-08-02

介绍Position的四个属性值：static、relative、absolute、fixed。

网上搜了一下有关CSS中Position的介绍，资料有很多，五花八门，要想找篇合适的文章需要好好筛选一番，毕竟不是每篇文章都能帮助自己理解某个概念。于是这里自己想写一篇文章来总结一下这个Position属性，虽然不是对所有人都有用，但这篇文章对自己来说很适合，这就是最好的，希望也能帮到大家。

Position有四个属性值，分别是：static、relative、absolute、fixed，接下来一一介绍一下。

 

1. static

 

2. relative

 

 

 

再举例：

<div id="parent">
     <div id="sub1">sub1</id>
     <div id="sub2">sub2</id>
</div>

relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

 

我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。

对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。

注意，relative的偏移是基于对象的margin的左上侧的。

 

3. fixed

 

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom 和 left 属性都可用。

 

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：

一个固定定位元素不会保留它原本在页面应有的空隙。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

 ps: 由于fix属性导致了右下角

4. absolute

 

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 static 的元素。

这里有一个简单的例子：

 

这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

 

再举例：

<div id="parent">
     <div id="sub1">sub1</id>
     <div id="sub2">sub2</id>
</div>

 

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。

注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，也就是忽略padding，当然并不会忽略margin和border。

接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

 

5. 参考

  

本来想自己手敲一下的，可是看到网上有那么多写的好的东东（懒），而自己语言又组织的不好（没文采），于是乎自己就无耻(懒 && 没文采)的拿来混编了一下，所以说这不是原创，这不是原创，望见谅。参考如下：

http://zh.learnlayout.com/position.html

http://www.cnblogs.com/yinc/articles/2017649.html