随笔 - 11  文章 - 2  评论 - 1

绝对定位和相对定位的内幕

css有5种不同的position属性值

我们不会讨论inherit，因为顾名思义，它就是继承了父元素的值，而且在比较老的IE版本中，支持情况也不好。


任何元素的position属性的默认值都是static。所谓的static定位就是元素在文档流中。当然了，这完全取决于你的HTML结构。


另一个值你肯定见过，它就是fixed。说白了，它就是把一个对象钉在背景上，因此无论你把它放在哪，它就会一直在那。我们经常在 sidebar的导航元素中看到它的身影，当页面向下滚动了很远的距离，这时候我们想回到顶部，如果没有一个fixed的导航，这种用户体验是很差的。


前面这三个值都很浅显易懂，接下来是绝对定位和相对定位。我们会单独的解释这些值，并且会讨论它们如何配合使用。


绝对定位

使用绝对定位，你可以让一个元素脱离文档流，并且把它放在页面上某个指定的位置。为了了解它如何工作，我们创建了一个简单的无序列表。


正如我们说过的，列表项（list item）默认的定位方式是static，这就意味着它们会跟随标准的文档流。下面我对其中一项使用绝对定位。

如你所见，第4项完全脱离了文档流，并且位于浏览器窗口的左上角。请注意，即使有其他内容占据了这个位置，这个元素也不在乎。当我们使用绝对定位时，它不会影响文档流中的其他元素，也不会被别的元素影响。


使用绝对定位的原因是我们想精确的定位，通过top、bottom、left和right属性，我们可以实现。举个例子，我们想让第4项距离顶部20px，距离左边20px。


为了证明绝对定位不会影响别的元素（或反之），我们让第4项靠近其他列表项。可以看到，它会叠加在其他元素上面而不是把它们挤开。


最后要注意的是，第5项占据了原来第4项的位置，而不是保持不动，就像第4项还在那一样。因为第4项脱离了文档流，其他所有元素都会进行调整。


相对定位

相对定位和绝对定位很类似，你也可以使用top、bottom、left和right进行精确定位。主要的区别在于元素的起始点不同。正如你前面看到的，绝对定位的起始点是浏览器窗口的左上角。同样的例子，来看看如果我们使用相对定位会怎样。


什么都没发生！事实证明，这个对象的确进行了相对定位，但是它的起始点就是元素在文档流的位置，而不是页面的左上角。现在，如果你使用相同的20px进行偏移，结果就会不同了。

这一次，这个元素相对于它的起始位置发生了位移。当你只是想对元素的位置进行微调的时候，这就非常有用了。请注意，和绝对定位一样，相对定位的元素 同样不关心文档流中的其他元素。但是，相对定位的元素原来的位置不会被后面的元素占据，这和绝对定位不同，相对定位对文档流不会产生任何影响，就好像那个 元素从未移动过。


它们如何配合使用

我们通过一个小例子来演示


HTML

创建一个div，class是“photo”，里面有一张200*200px的图片，这就是所有的HTML。

<div class="photo">
    <img src="http://lorempixum.com/200/200/people/9" />
</div>


基本的CSS

先简单的进行一些设置，比如把背景的颜色调暗些，给图片设置一个大小，设置好看的边框和阴影效果。

body {
    background: #222;
}
 
.photo {
    border: 5px solid white;
    height: 200px;
    width: 200px;
    margin: 50px auto;
 
    /* 有点复杂但是很酷的阴影效果 */
    -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

效果如下：


贴上一个胶带

我们想要的效果是使用一块小胶带把图片贴在背景上。


首先我们使用 :before 伪类创建胶带。我们给它20px高度和100px宽度，然后背景设置为白色，不透明度为50%，这里我又加了一点点阴影效果。

.photo:before {
    content: "";
    height: 20px;
    width: 100px;
    background: rgba(255,255,255,0.5);
 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}


效果如下。胶带实际上影响了文档流。即使它不可见，它还是把图片挤出了边框的范围。


既然发现了伪类带来的问题，为了解决这些问题，我们先试着给胶带使用相对定位。

.photo:before {
    content: "";
    height: 20px;
    width: 100px;
    background: rgba(255,255,255,0.5);
    position: relative;
    top: 0px;
    left: 0px;
 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}


效果如下：


如你所见，问题没有得到解决，那接着尝试绝对定位。

.photo:before {
    content: "";
    height: 20px;
    width: 100px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0px;
    left: 0px;
 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

效果如下：


这回胶带移动了，却移到角落上去了。我们可以使用top和left进行推移，但这还是解决不了问题。为什么呢？

分析一下原因，我们知道绝对定位可以把胶带定位到某个精确的位置，但是这张图片会自动水平居中，所以当你改变窗口大小时，图片的位置会进行调整，这时胶带的位置就又有问题了。


现在，我们尝试完了相对定位和绝对定位，但是都不能解决问题。我们接下来该怎么办呢？

别急，到现在我们还没有解释绝对定位背后的故事，实际上，绝对定位并不总是以浏览器窗口的左上角为起始点。我们所说的 position: absolute; 表示的是相对于元素的第一个非static定位的父元素进行绝对定位，也就是说绝对定位不是完全的绝对，而是相对于某个父元素，如果不存在这个父元素，默 认就是浏览器窗口（不是html或body节点！）


回到刚才的例子，我们还是对胶带使用绝对定位，但是首先需要确定绝对定位相对的父元素，也就是photo。我们不想对photo使用绝对定位，因为我们并不想移动它。因此，我们对它使用相对定位。

.photo {
    margin: 50px auto;
    border: 5px solid white;
    width: 200px;
    height: 200px;
    position: relative;
 
    /*overly complex but cool shadow*/
    -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
    box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
  
  
.photo:before {
    content: "";
    height: 20px;
    width: 100px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0px;
    left: 0px;
 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}


效果如下：


距离胜利还有一步之遥，最后我们还需要调整一下胶带的位置。注意一下，我为top属性设置了一个负值，因此胶带会偏离图片，产生一种浮在背景上的感觉。设置left属性使胶带位于图片的中间位置。

.photo:before {
    content: "";
    height: 20px;
    width: 100px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: -15px;
    left: 50px;
 
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}


效果如下：


小结

记住以下3点吧：

1. 相对定位就是相对于元素原来的位置让元素产生位移

2. 绝对定位就是相对于元素第一个非static定位的父元素进行定位

3. 相对定位或绝对定位的元素不会影响旁边的static定位或fixed定位的元素（绝对定位会脱离文档流，相对定位会占据原来的位置）

 

转自：http://www.cnblogs.com/zhujl/archive/2012/05/07/2488885.html

posted @ 2016-01-21 13:56  Double405  阅读(208)  评论(0)  编辑  收藏  举报