CSS属性之定位属性详解

来源：互联网发布：投标施工组织设计软件编辑：程序博客网时间：2024/05/17 03:57

什么是定位

定位是网页的一种布局方式。

定位的种类

文档流定位

文档流定位是指：

页面中的块级元素从上到下一个接一个的排列。
每个块级元素都以新的一行开始排列。
内联元素在一行中从左到右依次水平排列。

文档流定位，对象遵循常规流，此时四个偏移属性（top、right、bottom、left）不会被应用。

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8"><title>定位</title><style>    #main {    width: 400px;height: 400px;border: 1px solid orange;  }  .div1 {    width: 300px;height: 300px;border: 1px solid red;  }  .div2 {    width: 230px;height: 204px;border: 1px solid blue;  }  .box1 {    width: 100px;height: 100px;border: 1px solid #000;  }  .box2 {    width: 100px;height: 100px;border: 1px solid #000;  }  .box3 {    width: 100px;height: 100px;border: 1px solid green;  }</style>  </head>  <body>    <div id="main">  <div class="div1">    <div class="div2">  <div class="box1">box1</div>  <div class="box2">box2</div>  <div class="box3">box3</div></div>  </div></div><span>页面中的块级元素从上到下一个接一个排列。</span><span>每个块级元素均以新的一行开始排列。</span>   </body></html>

效果如下：

文档流是常见的一种定位方式。

浮动定位

无论什么元素添加浮动效果，均为其添加块级框。

float: left; 向左浮动。

float: right; 向右浮动。

clear: both; 清除浮动。

注：

文档流是对于盒子模型来说的。

文本流是对于文本段落来说的。

为元素添加浮动效果时，会使其元素脱离文档流，也就是说当它后面还有元素时，其它元素会无视它所占据的区域空间，直接在它下面或者它原来的位置布局；但文本段落、文本文字会认同浮动元素所占的区域空间，围绕它周围布局，也就是说没有脱离文本流。

例：我们只为box2添加向右浮动的效果：

.box2 {    float: right; /* box2向右浮动 */    width: 100px;height: 100px;border: 1px solid #000;  }

效果如下：

可以发现，box2浮动到了右边，而box3占据了box2原来的区域。那是因为box2添加浮动效果后，box2块级脱离了文档流，而紧跟它后面的元素块级box3会无视它的所占的区域，直接在它浮动前的区域布局。此时box1（块级元素）没有浮动效果，所以没有被其它元素无视它的占据区域。

此时同时我们为box1添加向左浮动效果：

.box1 {    float: left; /* box1向左浮动 */    width: 100px;height: 100px;border: 1px solid #000;  }  .box2 {    float: right; /* box2向右浮动 */    width: 100px;height: 100px;border: 1px solid #000;  }

效果如下：

此时box1、box2均脱离了文档流，后面的其它元素会无视掉box1、box2所占据了的区域，box3直接在box1下布局，box1占据的区域被无视后，box2就跟它在同一行上布局了。

此时可以发现，box3的边框不见了，这时我们只需清除box3的浮动效果即可。即：clear: both;

.box1 {    float: left; /* box1向左浮动 */    width: 100px;height: 100px;border: 1px solid #000;  }  .box2 {    float: right; /* box2向右浮动 */    width: 100px;height: 100px;border: 1px solid #000;  }  .box3 {    clear: both;    width: 100px;height: 100px;border: 1px solid green;  }

效果如下：

我们只为box2添加浮动效果，并在box2后添加一段文本文字。

.box2 {    float: right; /* box2向右浮动 */    width: 100px;height: 100px;border: 1px solid #000;  }

<div class="box2">box2</div>  <span>页面中的块级元素从上到下一个接一个排列。页面中的块级元素从上到下一个接一个排列。</span>

效果如下：

可以看出，文本文字会围绕在box2周围布局。说明文本文字会认同浮动元素所占据的区域。并未脱离文本流。

相对定位（relative）、绝对定位（absolute）、固定定位(fixed)

相对定位：遵循文档流，且以自己本身为参照物（在定位之前的位置），通过四个偏移属性（top、right、bottom、left）进行偏移。不会影响文档中的元素。

绝对定位：脱离文档流，以离自己最近定位的祖先元素（position） 为参照物，如果没有定位的祖先元素，则追溯到以body为参照物，通过四个偏移属性进行偏移，不会影响文档中的元素，其margin不会与其它margin重叠。

固定定位：与绝对定位一致，以窗口为参照物，当出现滚动条时，元素不会随着滚动。

以下列事例说明：

层级关系：

<div------position: relative; 不是最近的祖先元素，不是参照物。

<div------没有设置定位，不是参照物。

<div------position: relative; 是最近的祖先元素，是参照物。

<box1----

<box2----position: absolute; top: 50px; left: 120px; 绝对定位，以最近定位的祖先元素为参照物。

<box3----

可以看出设置为绝对定位的box2会以最近定位的蓝色div为参照物，而不会以最远定位的橙色div为参照物来偏移的。

若此时我们取消蓝色div的定位属性，即：层级关系为

<div------position: relative; 是最近的祖先元素，是参照物。

<div------没有设置定位，不是参照物。

<div------没有设置定位，不是最近的祖先元素，不是参照物。

<box1----

<box2----position: absolute; top: 50px; left: 120px; 绝对定位，以最近定位的祖先元素为参照物。

<box3----

此时box2会以唯一的一个定位的橙色div为参照物来偏移的。

若我们不为任何元素设置相对定位，即层次关系为：

<div------没有设置定位不是最近的祖先元素，不是参照物。

<div------没有设置定位，不是参照物。

<div------没有设置定位，不是最近的祖先元素，不是参照物。

<box1----

<box2----position: absolute; top: 50px; left: 120px; 绝对定位，以最近定位的祖先元素为参照物。

<box3----

此时发现box2是以body为对照物来偏移的。

仅使用margin为绝对定位的元素布局的情况：

当元素被设置为绝对定位时，也说明此元素已脱离了文档流，若此时仅用margin属性对元素布局，不管其元素有没有定位的祖先元素，都只以本身在文档流中原来的位置为参照物。

<div------position: relative; 不是参照物（本应该是的。）。

<div------没有设置定位，不是参照物。

<div------没有设置定位，不是最近的祖先元素，不是参照物。

<box1----

<box2----position: absolute; margin-top: 50px; margin-left: 120px; ，以文档流中原来的位置为参照物。

<box3----

固定定位（fixed）：与absolute一致，以窗口为参照物，当窗口出现滚动条时，不会随着滚动条滚动。若没有设置偏移属性值，则以元素在文档流中原来的位置的top、left值为属性值

.div2 {    position: relative;    width: 230px;height: 204px;border: 1px solid blue;  }  .box1 {    width: 100px;height: 100px;border: 1px solid #000;  }  .box2 {    position: fixed;    width: 100px;height: 100px;border: 1px solid #000;left: 120px;  }

效果：

以上可以看出，box2以窗口为参照物，left值为120像素，而因未设置top偏移值，所以以原来的位置的top值为偏移值。

层叠顺序（z-index）

一旦设置了定位，一般是绝对定位(absolute)，则可以会发生元素重叠的现象，有时会看不见我们想看见的元素。

z-index可以用来控制重叠元素出现的顺序，数值越高，优先权越高，离用户越近，用户越容易看见。

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8"><title>定位</title><style>    #main {    width: 400px;height: 400px;border: 1px solid orange;  }  .div1 {    position: relative;    width: 300px;height: 300px;border: 1px solid red;  }  .div2 {    width: 230px;height: 204px;border: 1px solid blue;  }  .box1 {    position: absolute;    width: 100px;height: 100px;border: 1px solid #000;background-color: red;z-index: 0;   /* 优先级别最低 */  }  .box2 {    position: absolute;    width: 100px;height: 100px;border: 1px solid #000;background-color: blue;z-index: 3;  /* 优先级别最高 */  }  .box3 {    position: absolute;    width: 100px;height: 100px;border: 1px solid green;background-color: yellow;z-index: 2;  }</style>  </head>  <body>    <div id="main">  <div class="div1">    <div class="div2">  <div class="box1">box1</div>  <div class="box2">box2</div>  <div class="box3">box3</div></div>  </div></div><span>页面中的块级元素从上到下一个接一个排列。</span><span>每个块级元素均以新的一行开始排列。</span>   </body></html>

效果：

本来按照文档流，出现在用户眼前是黄色背景，但我们设置为蓝色背景的层叠顺序优先权最高，所以出现在用户眼前的是蓝色背景。

1 0