你对CSS布局中的Position了解程度有多少

前端  /  管理员 发布于 7年前   210

当人们将接触CSS布局的时候倾向于使用Position。Positoin似乎是一个很容易掌握的概念。从表面上来看，你只要精确指定了一个块所处的位置，它就会坐落在那里。然而定位比你刚接触时要更复杂一些。这里有几件事会绊倒一个新手，所以在熟练使用之前需要掌握它们。

一旦你深入地理解了Position的工作原理，你就可以使用它做出很棒的事来

盒模型和Position类型

为了理解定位你首先的理解盒模型。前面一个链接是我之前写给InstantShift关于盒模型的一篇文章。我在那里做了详细的介绍，在这里我将提供一个快速的总结。

在CSS中，每个元素都被一本矩形框所包围，每个元素都定了内容区，内容区被内边距（填充）包围，边框包围了内容区和内边距。外边距在边框外面用来和其他盒子分隔开来。你可以在下面这张图中看到这些

 

定位 模式定义了一个盒子在整体布局中将会放置在哪里、每个盒子怎样影响在它周围的盒子。定位模式包含了正常文档流，浮动流和几种类型的定位元素

CSS定位属性有五个可取值

position: absolute
position: relative
position: fixed
position: static
position: inherit

下面我将对前三个属性进行详细地讲解，对后面两个属性只是作简单的介绍

static是position默认的值。每个position属性被设置为static的元素将在正常文档流中显示。它们被放置和显示的规格在盒模型中定义。

一个static定位的元素将会忽略任何top, right, bottom, left, z-index属性的值。为了使用其中任何一个值，你必须将元素的position属性设置为absolute, relative, fixed之一

inherit和其他所有css属性一样，当前元素取得和父级元素相同的属性值。

绝对定位(Absolute Positioning)

绝对定位的元素完全从正常文档流中除去。对于包围它的其他元素而言，它们认为绝对定位的元素不存在，就好像将元素的display属性设置为none。假如你想保留它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你在设置一个绝对定位元素的位置时，top, right, bottom, left四个属性，你通常只定义其中的两个，top或者left，以及left或者right。它们的默认值都是auto

理解绝对定位的关键是理解它们从哪里开始。假如top值为20px，问题是20px是从哪里开始的。

一个绝对定位元素的起点位置是相对于它第一个postion属性值不为static的父级元素而言的。假如在父级元素链中没有满足条件的，绝对定位元素就是相对于整个文档窗口来定位的。哈

关于”相对“这个概念你或许有点疑惑，特别是还有个我们还没有谈到的”相对定位”的东西。

当你为一个元素设置position:absolute，css将会看这个元素的父元素，如果父元素被定位过（除了static），那么绝对定位元素的起点是父元素的左上角位置。

假如父元素没有被应用除static以外的positon定位，那么就检查父元素的父元素有没有应用除static以外的position定位。假如有，绝对定位元素的起点就是这个元素的左上角位置。假如没有，继续在DOM树上查找，知道找到一个应用除static以外的定位元素，或者查找失败，到达最外层的浏览器窗口。

相对定位（Relative Positoning）

相对定位也是根据top, right, bottom, left属性来定位。但是只是相对于它们原来的位置进行移动。这意味着，添加相对定位和添加外边距有些相似。但也有一个重要的不同之处，围绕在相对定位元素附近的元素会忽略相对定位元素的偏移

我们可以把它看做是一张图片的重像从真实的图片位置开始进行一点移动。它原始图片所占据的位置仍然保留，但我们已经没法再看到它，只能看到它的重像。这样就让元素之间可以进行位置的重叠，因为相对于定位元素能够移动到其他元素所占据的空间中。

相对定位元素从正常文档流中脱离，但是它仍然影响着围绕着它的元素。围绕着它的元素表现的好想相对定位元素仍在处在正常流中一样。

我们不需要在这里询问相对谁进行定位。答案是，始终是相对于正常文档流。相对定位好像为元素添加外边距（margin），但是对相邻的元素而言好想什么也没有发生。实际上没有添加外边距。

固定定位（Fixed Positioning）

固定定位和绝对定位有些相像，但是也有一些不同

首先，固定定位始终相对于浏览器窗口进行定位，然先取得top, right, bottom, left,属性值来进行定位。它脱离了它的父级元素，它定位元素中它表现得有点反叛。

第二个不同点是在名字上继承的。固定元素始终时固定的。当页面固定时他们不会移动。你告诉它该在哪里固定，它就始终在那里。这样，他们看起来似乎又不是那么反叛。

在某种意义上，固定定位元素有点像固定定位的背景图片，只不过它的外层容器始终时浏览器窗口罢了。如果你在body中设置一个背景图片，那么它与一个固定定位元素的行为非常相像。只不过在位置的位置不是那么精确。

背景图片也不会改变其在第三维度的位置，也因此带来了z-index属性

z-index，打破平面

一个页面是二位平面，它有宽和高。我们活在一个用z-index作为其深度的三维世界中，这个额外的维度能够穿越一个平面。

高z-index值在低z-index值元素上面，并从页面的上方运动。相反地，低z-index值在高z-index值元素下面，并从页面下方运动。

没有z-index，定位元素有点儿麻烦。应用了z-index，你可以做出一些创造性的东西出来，允许一个元素在另一个元素的上方或下方。每个元素的z-index属性默认值是0， 并且可以使用负值。

事实上，z-index比我这里叙述的要复杂得多，但细节写在了另外一篇文章里。现在请记住这个额外维度的基本概念，以及他们的堆叠顺序。并且只有定位元素才可以使用z-index属性

定位问题（Positioning Issues）

这里有一些常见的定位元素常见的问题，每个问题都值得了解。

1.你不能对一个元素同时使用position属性和float属性。因为对使用什么样的定位方案来说两者的指令是相对冲突的。如果你把两个属性都添加到同一个元素上，那么就期望在CSS中较后的那个属性是你想要使用的吧。

2.Margin不会在绝对定位元素上折叠。假如你有一个底外边距是20px的段落，在这个段落下面正好是一张有30px上外边距图片，段落和图片之间的空白将会是50px（20px+30px），而不是30px(30px > 20px)。这就是众所周知的外边距折叠，两个外边距合并（折叠）成一个。绝对定位元素不会像那样进行margin的折叠，这会使他们跟预期的不一样。

3.IE在z-index有些bug。在IE6中，选中元素总是在堆叠元素是上方，而不管它的z-index以及其他围绕在它周围的元素的z-index值是多少。

IE6和IE7在堆叠层上还有其他的问题。IE6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面，而不是每一个单独的元素自身的层级决定。

复制代码代码如下:
<div style="z-index: ">
<p style="z-index: 1"></p>
</div>
<img style="z-index: " />

你觉得段落会在堆叠成的最上面，因为它有最大的z-index值，但是在IE6和IE7中，图片将会在段落上面，因为看起来有两个不同的堆叠层。一个是div的，一个是image的。image比div有更高的z-index，因此它会覆盖在div中的任何东西

总结

对一个元素应用定位属性，元素的表现将取决于CSS的定位模式。你可以对一个定位元素使用absolute, relative, fixed, static(default)和inherit值。

定位模式，包括CSS定位元素，定义了一个盒子在布局中放在哪里，并且紧挨着它的元素是怎样受定位元素影响的。

z-index可应用于定位元素。它向页面添加了第三维度，并且定义了元素堆叠的顺序。

定位属性看起来很容易掌握，但是它工作起来和它在表面时所看到的不一样。你可能会觉得相对定位更像绝对定位。你通常想在布局是使用浮动，而对一个特殊的元素使用定位，以打破页面布局。