使用CSS定位元素

 

一、定位的基本概念

 

一般我们定位元素都使用绝对定位，因为绝对定位是最容易掌握的定位方式。但结合其他定位方式，我们可以设计更加灵活的页面。

 

CSS控制定位的属性为：Position

 

CSS中关于定位（position）是这样定义的：
　　定位（position）：允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。

 

他的允许值有三个：static,relative和absolute

 

static为默认属性。relative为相对定位，absolute为绝对定位。

 

static :　       默认值。无特殊定位，对象遵循HTML定位规则
absolute:      将对象从文档流中拖出，使用 left ， right ， top ， bottom     

                     等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

                     如果不存  在这样的父对象，则依据 body 对象。而其层叠通过         

                     z-index 属性定义 fixed :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative :      对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

 

 

检索对象的定位方式。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

 

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position 。

 

 

二、各种定位区别

 

1. 相对定位

相对定位是一个非常容易理解的概念，如果对一个元素进行相对定位，它将在他所在的位置上，然后可以通过设置垂直和水平的位置，让这个元素‘相对于’起点进行移动，如果将top 设置为20px,那么框就会出现在原位置顶部下面20px的地方，如果将left 设置为20px 那么框就会向右移动20px

 

#mybox{ Position:relative; Top:20px; Left:20px; }

 

 

如下图：

 

 

 

 

使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此移动元素会导致它覆盖其他框。

 

2．绝对定位

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

 

把相对定位中的代码改成absolute

则会变成这样：

 

 

 

 

 

绝对元素的位置相对于最近已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块。根据代理的不同可能是画布或HTML。

与相对定位的框一样，绝对定位的框可以从它的包含块向上，下左，右移动。这提供了很大的灵活性。可以直接将元素定位在页面上的任何位置。

 

 

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序。Z-index值越高，框在堆中的位置就越高。