元素的定位与浮动

经典盒模型的结构：

定位：

元素的定位通常使用position属性，其适用于所有元素。position的取值及含义如下：

static（默认值）：文档流中正常显示；

relative：相对于它在文档流中应该占据的位置进行定位，原来占有的空间仍保留；

absolute：相对于其属性不为static的祖先元素的内容区进行定位，其原先在文档流中占据的位置完全消失，好像不存在一样。定位后都会产生块级框，不论原来在文档流中生成的是什么框；

fixed：相当于把position属性设置为absolute，不过其包含块为视窗本身。

另外，还有四个偏移属性top，right，left， bottom，这四个属性适用于position值不为static的元素。值为百分数，相对于其包含框的宽度（高度）。我们举几个例子来感受一下吧！

例1：

 

<div style="width: 400px; height: 400px; background-color: black; margin-top: 20px; margin-left: 100px">
    <div style="background-color: pink; width: 100px; height: 100px"></div>
    <div style="background-color: pink; width: 100px; height: 100px;
                position: relative; bottom: 50px; right: 50px; top: 50px"></div>
</div>

显示效果：

 

 

 

由此可以看出对于相对定位的元素，如果我们设置了top（left），无论将bottom（right）的值设置成什么，都不会起作用，而是取成top（left）的相反数。如果没有设置top（left），设置的bottom（right）的值就会起作用，而top（left）会取bottom（right）的相反数。

例2：

 

<div style="width: 400px; height: 400px; background-color: black; margin-top: 20px; margin-left: 100px; position: relative">
    <div style="background-color: pink; width: 100px; height: 100px"></div>
    <div style="background-color: pink; width: 100px; height: 100px;
                position: absolute; bottom: 50px; right: 50px; top: 50px"></div>
</div>

显示效果如下：

 

对于绝对定位且固定宽高的元素，如果设置了top（left），元素就会据此定位，bottom（right）的值不起作用，会自适应。如果没有设置，则按bottom（right）的值定位，top（left）自适应。若元素宽高不固定，根据top，left，bottom和right四个值确定了位置后，宽高也就确定了。但我们也可以通过max-width（max-height）和min-width（min-height）来定一个范围，无论怎么设置（包括设置具体的width，height）元素宽高都不会超过这个范围。

既然定位元素可以设置top等属性值，那么margin-top对他们还有没有作用呢？我们来看一个例子：

 

<div style="width: 400px; height: 400px; background-color: black; margin-top: 20px; margin-left: 100px; position: relative">
    <div style="background-color: pink; width: 100px; height: 100px"></div>
    <div style="background-color: pink; width: 100px; height: 100px;
                position: absolute; bottom: 50px; right: 50px; top: 50px; margin-top: 10px"></div>
</div>

效果如下：

 

我们可以看到，margin-top起作用了。原因是：

top等值是相对元素的margin外侧设置的。

 

例子中的60px，其中上面的50px是top，下面的10px是margin-top。

说到margin，还有一点需要注意，外边距合并。参考：css外边距合并

经过定位元素很可能出现重叠，z-index属性（默认值为0）适用于所有position值为absolute，fixed或relative的元素，它用来规定重叠次序。z-index值可负可正， 拥有相同父元素的元素z-index值越小，元素越靠下。如果一个元素的子元素z-index值不为默认值，该元素就会创建一个叠放上下文环境，该元素所处的位置就是叠放上下文的z-index为0的地方。

例如：

 

<div style="width: 300px; height: 300px; background-color: black; position: relative">
    <div style="width: 50px; height: 50px; background-color: pink; position: absolute;
                top: 0; left: 0"></div>
    <div style="width: 50px; height: 50px; background-color: gray; position: absolute;
                top: 0; left: 20px"></div>

    <div style="width: 50px; height: 50px; background-color: pink; position: absolute;
                top: 80px; left: 0; z-index: 1"></div>
    <div style="width: 50px; height: 50px; background-color: gray; position: absolute;
                top: 80px; left: 20px; z-index: 0"></div>
</div>

效果如图：

 

当拥有相同父元素的div都没有设置index时，index均取默认值0。后出现在文档流中的元素块会覆盖前面的。当两个div都设置了z-index时，值越小，离用户越远，因此被覆盖。

我们再看下面这个例子：

 

<div style="width: 300px; height: 300px; background-color: black; position: relative; z-index: 5">
    <div style="width: 50px; height: 50px; background-color: pink; position: absolute;
                top: 0; left: 0; z-index: 0"></div>
    <div style="width: 50px; height: 50px; background-color: pink; position: absolute;
                top: 80px; left: 0; z-index: 1"></div>
</div>

效果如图：

 

我们发现结果并不像我们预想的那样：父元素覆盖子元素。这是为什么呢？因为子元素的z-index值是相对于父元素的。那是不是将子元素的z-index值设置为负数，就能达到预期效果的呢？通过实践，我发现并不可以。因为css2.1中要求元素绝不会叠放在其叠放上下文的背景之下。但这又会因为用户代理的做法不同而有所差异，所以要慎重使用负值。

浮动

float属性适用于所有元素。浮动元素会产生一个块级框，无论它原来是块级元素还是行内元素。如果将float设为left，则元素就会尽可能往左边浮动，知道它遇到一个边框。如果当前行宽度不够，则会自动下移，找到一个可以容得下它的地方。如果子元素宽度大于父元素的话，它会占据整行并超出。浮动还遵循：后出现的元素不会高于先出现的元素。float属性还会影响其它元素的布局，我们可以用clear来消除这种影响。关于clear属性的详解可参考：clear详解

啊，终于写完了。还是欢迎大家批评指正哦！