首页电商视觉设计技术文章正文

UI培训之深入了解Position属性

更新时间:2016年03月10日16时49分来源:传智播客UI培训学院浏览次数:

深入了解Position属性

1.1 position简介

CSS中的定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。该模式包括了常规文档流，浮动，和几种类型的 position 定位的元素。

其中，CSS position 属性可以取5种值：

 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

position 值为 inherit 的元素和其他所有属性的继承值一样，元素会继承父元素的 position 值。

1.2 绝对定位

绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在。就好像 display 属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个，top 或者 bottom，以及 left 或者 right。默认地它们的值都为 auto。

弄明白绝对定位的关键是知道它的起点在哪里。如果 top 被设置为20px，那么你要知道这20px是从哪里开始计算的。

一个绝对定位的元素的起点位置是相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素，那么绝对定位元素则会相对于文档窗口来进行定位。

当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素，并且如果父元素的 position 值不为 static ，那么绝对定位元素的起点为父元素的左上角位置。

如果父元素没有应用除了 static 以外的 position 定位，那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位，那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。

1.3相对定位

相对定位的元素也是根据 top, right, bottom, 和 left 四个属性来决定自己的位置的。但只是相对于它们原来所处于的位置进行移动。在某种意义上来说，为元素设置相对定位和为元素添加 margin 有点相似，但也有一个重要的区别。区别就是在围绕在相对定位元素附近的元素会忽略相对定位元素的移动。

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

相对定位元素离开了正常文档流，但仍然影响着围绕着它的元素。那些元素表现地就好像这个相对定位元素仍然在正常文档流当中。

我们无需再追问这个相对的位置是在哪里。因为这个相对位置很显然是正常的文档流。相对定位有点儿像为元素添加了 margin ，对相邻元素来说却像是什么都没发生过。但实际上并没有增加任何的 margin 。

1.4 固定定位

固定定位的行为类似于绝对定位，但也有一些不同的地方。

首先，固定定位总是相对于浏览器窗口来进行定位的，并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素，它就是定位中表现地有点儿反叛。

固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。

在某种意义上说固定定位元素有点儿类似固定的背景图片，只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个固定的背景图片，那么它与一个固定定位的元素的行为是非常像的，只不过在位置上的精度会略少一些。

1.5 z-index

HTML页面是一个二维平面，它具有宽度和高度，但我们可以用 z-index将页面带入三维的世界中。

由上图可知，高的 z-index 位于低的 z-index 的上面并朝页面的上方运动。相反地，一个低的 z-index 在高的 z-index 的下面并朝页面下方运动。

没有的 z-index 的话，定位元素会有点儿麻烦。因为 z-index 能让一个定位元素位于另一个元素的上方或者下方，这或许能让你做出点创造性的东西。所有的元素的默认的 z-index 值都为0，并且我们可以对 z-index 使用负值。

1.6 定位的问题

对于定位元素来说由几个比较常见的问题，都值得我们好好了解。

（1）你不能在同一个属性当中应用定位属性和浮动。因为对使用什么样的定位方案来说，两者的指令是相冲突的。如果你把两个属性都添加到一个相同的元素上，那么CSS中较后的那个属性会覆盖前面的。

（2）Margin 不会在绝对元素上折叠。假设你具有一个 margin-bottom 为20px的段落。在段落后面是一个具有30px的 margin-top 的图片。那么段落和图片之间的空间不会是50px（20px+30px）而是30px（30px > 20px）。这就是所谓的外边距合并，两个 margin 会合并（折叠）成一个 margin。

绝对定位元素则不会像那样进行 margin 的折叠。

（3）IE在 Z-index 上有一些BUG。在IE 6中 select 元素总是处于堆叠层级的最上方而不管它的 z-index 和其他元素的 z-index 是多少。

IE 6和IE 7在堆叠层级上又有另外一个问题。IE 6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面，而不是每一个单独的元素自身的层级决定。

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：