各种定位-css 傻傻分不清楚

引子

定位是网页设计中很重要且常用的基础知识。学习定义不是一个简单的事情，它需要反复的实践和体会。这里总结了一些定位的基础概念和常见例子。

总结了一些css 中关于定位的问题，和陷阱。

主要内容包括：

相对定位，绝对定位，fixed，浮动。

准备知识

参照物：元素定位的参考点。脱离参照物的定位是没有意义的。这就像物理中的参考系的概念一样。

四个偏移量：

top ， bottom ,left , right ， 分别定义相对于参照物 顶部，底部，左边，右边 的偏移量。

相对定位

position:relative;

相对定位相对的是元素本身的位置。它的位置会根据偏移量移动，但是它的占用空间还是处于原来的位置。也就是说，视觉上它移动了，但是它的根（原本的位置）是不动的。

绝对定位

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，则相对于body定位。

什么叫已定位？简单来说，就是设置过position的元素。上面引用来自w3school。

绝对定义的元素不会再占用原有的空间。一般弹出框，下拉列表都会使用绝对定义。

下面是一个例子：



第一个黄色块没有设置定位，所以默认处于它的父元素，绿色块的左-上方。元素的默认位置就在这里。之后的元素依次排开。

第二个黄色块设置了绝对定位，并且定位值是 right:0，表示和包含块的右边的偏移量为0。 可以看到它和灰色块（灰色块是包含它且最近的已定位元素，直接父元素-绿色快没有定位）的右边对齐了。这里并没有设置 top，所以它的垂直位置还在原来的地方。

下面是源码：

<style>
div{
background-color:#DADACE;
}

#main{
position: absolute;
width:300px;
}

#d0{
background-color:green;
min-height:500px;
width:200px;
}

#d0 pre{
width:80%;
background-color:yellow;
}

#d0 .style2{
position:absolute;
right:0;
}
</style>

<div id="main">
<div id="d0">
<pre class="style1">
就让我这样子漂流着
我很好 没事的
</pre>
<pre class="style2">
就让我这样子漂流着
我很好 没事的
</pre>
</div>
</div>

fixed

fixed 设置的定位类似 absolute，但是它的包含块会被设置为视窗本身。如果需要设置一个相对窗口固定的元素，应该使用fixed。

下面的fixed元素，当页面滚动时，它的位置不变。一般用作导航条，或者一些需要位置固定的按钮，等等。

浮动 float

参考&其他

div 中的内容是 如果你还在就好了 的歌词。挺不错的一首歌。很有感觉。