CSS定位问题

         这一阵子刚学CSS，对CSS定位问题学习了一下，写下这篇文章作为学习成果。同时与大家分享一下自己学习的经验，文章中有不对的地方，欢迎大家拍砖指正。

在看这篇文章是，希望大家对CSS盒式模型有所了解，不清楚的点这里。

一．定位概述

        在说明定位问题前，我们先聊聊DIV这个元素。通常我们把p、h1或div元素常常称为块级元素。这意味着这些元素显示为一块内容，即“块框”，块框从上到下一个接一个地垂直排列。与之相反，strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”，行内框在一行中水平排列。

        通过上面我们了解到<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。可以使用display属性来改变。

         CSS中有三种基本的地位机制：普通流、浮动和绝对定位。除非特别指定，否则所有框都在普通流中定义。顾名思义，普通流中元素框的位置由元素在HTML中的位置决定的。

         说了这么多了，那么我们现在进入进入正题。

二．相对定位

        相对定位是比较简单的，但是要弄清概念，最好自己实践。

        相对定位的元素仍然属于普通流。也就是说相对定位是在它原来的位置上进行偏移。可以通过设置top、left的像素值来达到偏移的目的。在使用相对定位时，无论是否移动，元素仍然占有原来的空间。也就是说其他元素会表现得该元素没有移动似的。但是，有一点，要注意，相对定位后，可能会导致它覆盖其他的元素。下面通过示例来讲解。

        示例HTML代码：

<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>

       正常显示控制的CSS代码：

#c1{
	width:100px;
	height:100px;
	border:solid red 1px;
}
#c2{
	width:100px;
	height:100px;
	border:solid red 1px;
	background-color:yellow;
}
#c3{
	width:100px;
	height:100px;
	border:solid red 1px;
}

普通流中的元素显示如图1左面所示：

        相对定位后的CSS代码，我们只要稍微修改下C2就行了，其它一样，代码如下：

#c2{
	width:100px;
	height:100px;
	border:solid red 1px;
	background-color:yellow;
	position:relative;
	left:20px;
	top:20px;
}

相对定位后的效果如图1右面所示，我们可以看到确实是覆盖了其他元素。

三．绝对定位

        相对定位被看作普通流定位的一部分。与之相反，绝对定位于文档流无关，因此，不占有普通流的空间。普通流文档流中的元素就当绝对定位的元素不存在一样，但是绝对定位的元素也有可能会覆盖其他元素。但是我们可以通过设置z-index属性来控制这些覆盖，z-index属性越高，框越能够显示在前面。这个z-index属性只是针对于绝对定位元素来设置的，不是绝对定位的元素，设置无效的，这是我实验得到的结果，如果有哪位实验不是这个结果，请告知我，谢谢。

        知道了绝对定位是脱离普通文档流，那么它是针对谁绝对定位呢？绝对定位元素的位置是相对于距离它最近的那个已经定位的祖先元素来确定的。如果元素没有已经确定的祖先元素，那么它的位置是相对于初始包含块的。

        与相对定位一样，绝对定位的框可以通过top、left、right、bottom这四个来设置的，你可以直接把元素定位在也没上的任何位置。

        下面通过示例来阐述。

        正常绝对定位代码，显示后如图2左面所示：

#c1{
	width:100px;
	height:100px;
	border:solid red 1px;
}
#c2{
	width:100px;
	height:100px;
	border:solid red 1px;
	background-color:yellow;
	position:absolute;
	left:40px;
	top:40px;
	z-index:1;
}
#c3{
	width:100px;
	height:100px;
	border:solid red 1px;
	}

        在C3中添加如下代码，绝对定位后如图2右面所示

z-index:2;
position:absolute;
background-color:red;

四．固定定位

        固定定位是绝对定位的一种。差异是固定定位的定位块会一直出现在视窗上，大家可以查看看优酷网站最上面的那个搜索栏就知道什么事固定定位了。

五．浮动

        浮动定位是定位中比较难的。浮动是指框可以左右移动，直到它碰到包含框或另一个浮动框的边缘的边缘。因此浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动不存在一样，但是这句话也不绝对对，下面就几种情况分别在不同的浏览器中的表现。进行讨论。

       示例HTML代码：

<div id="p1">p1</div>
<div id="p2">p2</div>
<div id="p3">p3</div>

CSS普通流代码：

#p1{
	width:300px;
	height:200px;
	border:solid black 1px;
}
#p2{
	width:300px;
	height:200px;
	border:solid red 1px;
}	
#p3{
	width:700px;
	height:200px;
	border:solid blue 1px;
}

        我们暂时先不管P3，下面我们就4种情况进行讨论，这几个如果浮动都是向左浮动的。

                      1.        P1普通流，P2普通流

                      2.        P1浮动，P2普通流

                      3.        P1普通流，P2浮动

                     4.        P1浮动，P2浮动

        第一种情况P1普通流，P2普通流，也就是大家都不浮动，在IE,CHROME,FIREFOX中表现一样，如下图3所示：

        第二种情况P1浮动，P2普通流，在IE中显示如图5，在Chrome,FireFox中显示如图4所示：

        第三种情况P1普通流，P2浮动，在三种浏览器都显示如图6所示：

       第四种情况P1浮动，P2浮动，在三种浏览器都显示如图7所示：

        从上面四种情况，我们可以总结出，假设该元素浮动是向左的。如果都不浮动，那么它们是垂直排列的。如果一个元素前面有不浮动的块元素的话，它是从下一行开始浮动的，从情况2中我们可以看出，当然在IE中稍微不一样，它是接着后面显示的。如果一个元素后面有不浮动的元素的话，会当它不存在一样，这个我们从情况3可以看出。大家都浮动的话，顺序排列，如果一行显示不下的话，会自动到下一行显示。如图8所示。如果浮动元素的高度不一样的话，那么他们下移会“卡住”。如图9所示。那么到这里我们基本讲解了浮动大多数东西，还有行框的清理等，由于自己没太搞清楚，所以就不献丑了。