CSS定位/浮动——position/float
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
1、简述
-
例如
div、h1、p元素为块元素；strong、span元素为行内元素 -
通过
display属性可改变这些元素的类型 -
CSS定位的机制有：普通流、浮动、绝对定位
2、static定位：
HTML元素的默认值，即没有定位，元素出现在正常流中元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中
静态定位的元素不会受到top、right、bottom、left影响
3、fixed定位：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
例如：固定一个p段落在距离浏览器上方30px，距离右方5px：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
4、relative（相对定位）:
相对定位元素的定位是相对其正常位置：
注意：==在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间==。因此，移动元素会导致它覆盖其它框
例如：h2标签相对于正常位置向右移动了20px
h2.pos_left
{
position:relative;
left:20px;
}
5、absolute（绝对定位）：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块<html>或者画布<canvas>:
注意：absolute定位使元素的位置与文档流无关，因此不占据空间，而且==可以覆盖页面上的其它元素==
例如：h2标签被放在距离左边的页面100 px和距离页面的顶部150 px的元素:
h2
{
position:absolute;
left:100px;
top:150px;
}
6、重叠的元素：
当相对定位或绝对定位出现重叠的元素时，z-index指定了一个元素堆叠的顺序
例如：设定img在其他与它重叠元素的下边：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面==具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面==。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
7、CSS定位的其他属性：
（1）overflow属性：
-
值为
scroll时，当内容溢出元素框时会出现滚动条 -
值为
hidden时，当内容溢出元素框时将会隐藏溢出的内容
（2）clip属性：
-
clip属性剪裁绝对定位元素 -
clip属性的唯一合法值为：clip:rect(top,right,bottom,left)
8、浮动属性——float
元素的水平浮动，意味元素只能左右移动
一个元素会尽量水平浮动，直到它碰到包含框或另一个浮动框的边框为止
浮动元素之后的元素将围绕它
如果图像是右浮动，下面的文本流将环绕在它左边
（1）彼此相邻的浮动元素：
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
例如对图片廊使用float属性：
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
（2）清除浮动——clear属性：
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear属性指定元素两侧不能出现浮动元素
网友评论