css定位研究

css的定位是很重要的一个知识点，要学会网页布局，一定要先把定位弄清楚，今天抽空整理一下这方面的知识。

1.块级元素和行内元素（内联元素）

块级元素：display值为block的元素就是块级元素，比如div,h，p,table，块级元素会占据一定的矩形空间，通过设置width，height，padding,margin等来调整这个矩形框（也就是盒模型）的大小。

行内元素（内联元素）：display的值为inline的元素为内联元素，这些元素本身不占据矩形空间，必须依附于块级元素而存在，所以给他们设置width等参数是没有意义的。

2.四种定位方式

css中有四种定位方式，static,relative,absolute,fixed.接下来我将一个一个叙述。

static:

static是默认的定位方式，它的规则是：块级元素一行一行排列，每个块级元素占据一定的空间。行内元素依附与块级元素。不能使用top，bottom，left，right和z-index来描述。比如，下面的代码。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>盒模型研究</title>

<style>

* {

    margin: 0;

    padding: 0;

}

#box1 {

    background-color: #C6F08C;

    padding: 5px;

    color: white;

    margin: 5px;

    width: 100px;

    height: 100px;

}

.box2 {

    background-color: red;

    width: 50px;

    height: 50px;

}

#box3 {

    background-color: blue;

    width: 100px;

    height: 100px;

    padding: 5px;

}

</style>

<script>

</script>

</head>

<body>

    <div id="box1">

    <a href="#">跳转链接</a>，<a href="#">跳转链接</a><!--默认形成一个行框-->

    <div class="box2">Hello World</div>

    </div>

<div id="box3">

    <div class="box2">Hello World</div>

    <h2>another box</h2>

</div>

</body>

</html>

其形成的样式如下：

可以看到，div这些块级元素会垂直排列下来，而行内元素如a则依附于块级元素在水平方向排列，直到它的宽度不够容纳，就会自动换行下来。

relative:

relative翻译过来是相对的意思，所以理解相对什么最关键，相对的是父块级元素，不管父元素是哪种定位方式。一旦我们将一个元素的position设置为relative，它的显示位置就会相对于它在父元素中自己本来的位置进行移动，而具体移动到什么地方，可以通过left,right,top，bottom等值来设置。但是需要注意的是，它在文档中还是占据了它原本应该有的位置，也就是说他原来的位置依然不能放其他元素，尽管它已经不在那边了。

这样说有点抽象，我们来举个例子。再上面例子的情况下，我们将box2设为relative,并且设置其left和top。如下所示。

.box2 {

    position:relative;

    left:20px;

    top:20px;

    background-color: red;

    width: 50px;

    height: 50px;

}

这样以后，上述的页面变成这样显示。

可以看到，两个box2相对于其在父div中自己原来的位置向左和向下移动了20px.而通过观察box3中的another box这个元素我们可以发现，尽管box2移动走了，它并没有占据掉box2原来的位置，可见，box2原本的位置依然没有释放。这一点十分重要。同时我们发现，box2遮挡住了部分原来another box的位置。

可以这样理解，如果把每个块级元素比喻成相框，relative标记的元素就好像我们把相框中的相片拿出来，相对于相框原来的位置移动到了一个新的位置显示，有可能凌驾于其他的相框之上（box2遮挡了部分another box），但是因为它的相框还占据着原来的位置，所以其他的相框（元素）不能放置在它初始的位置。

absolute

absolute翻译过来叫做绝对，这是跟relative相对对应的，relative是相对于自己原来在父容器中的位置的偏移量。而absolute则是相对于父容器的偏移量，并且标记为absolute的元素已经脱离了文档流，它原本的位置可以被其他的元素侵占。

还有一个重要的条件是，标记为absolute的元素所相对的父元素指的是它的第一个非static父元素，如果他所有的父级元素都是static，则它的父容器为整个文档流。

先看如下例子，在box1和bo,3中均放置着box2，我们把box2设置为absolute，而box1和box2均为默认的static。则根据上述理论，box2的父级容器当属整个文档流。我们设置box2的偏移量则是相对于最外层的文档流的偏移量。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>盒模型研究</title>

<style>

* {

    margin: 0;

    padding: 0;

}

#box1 {

    background-color: #C6F08C;

    //position:relative;

    padding: 5px;

    color: white;

    margin: 5px;

    width: 100px;

    height: 100px;

}

.box2 {

    position:absolute;

    left:20px;

    top:20px;

    background-color: red;

    width: 50px;

    height: 50px;

}

#box3 {

    background-color: blue;

    //position:relative;

    width: 100px;

    height: 100px;

    padding: 5px;

}

h2{

position:relative;

}

</style>

<script>

</script>

</head>

<body>

    <div id="box1">

    <a href="#">跳转链接</a>，<a href="#">跳转链接</a><!--默认形成一个行框-->

    <div class="box2">Hello World</div>

    </div>

<div id="box3">

    <div class="box2">Hello World</div>

    <h2>another box</h2>

</div>

</body>

</html>

可以看到两个box2都跳到了同一个地方，这是因为它们都是相对于最外层文档流进行了偏移。而且我们看到在box3中原来的box2的位置被another box这个h2占据了，说明absolute标记的元素已经从原来的位置删除了，就好像连整个相框都拿走了，放置到其他的相框上面。所以放原来相框的位置可以放置其他相框。（事实上就好像从来没有放置过这个相框一样，其他元素会重新占据它的位置并重新布局）

现在我们把box3的position改为relative，观察会出现什么情况。

我们发现其中一个box2改变位置了，变成了相对于box3的原点向右和向下偏移20px.这是因为此时这个box2的父级元素是box3.(第一个非static元素）。

总结一下：标记为absolute的元素，它会相对于自己的第一个非static父级元素（如果都是static，则是相对于最外层文档流），偏移指定的位移。并且它原本所占的位置可以被其他的元素抢占，就好像它从来没有出现过一样。

fixed

fixed基本与absolute类似，但是它的父元素是整个body，即它是相对于整个body来偏移；所以它不会随着其他元素的滚动而滚动,不像absolute，会随着父级元素的滚动而滚动。这也是它叫fixed的原因。我们常常看到有些网站，顶部那条菜单栏是固定的，就是用fixed实现的。

4.z-index.

我们在介绍relative或者absolute或者fixed的时候，发现被偏移的元素会跑到别的元素上面，遮挡住其他元素。就好像一张相框遮住了另外一张相框一样，其实我们可以通过Z-index来设置各个相框的排列顺序，z-index越大表示放在越上面。

不过值得注意的是，参与比较的元素都必须是非static元素，否则比较就没有意义。因为非static始终是覆盖在static元素上的。