一、首先介绍下CSS的定位属性
1.top, bottom, left, right
设置定位元素的上(下/左/右)外边距边界与其包含块上(下/左/右)边界之间的偏移,如果"position"属性的值为"static",那么设置"top,bottom,left,right"属性不会产生任何效果。
2.clear 规定元素的哪一侧不允许其他浮动元素
clear属性定义了元素的哪边上允许出现浮动元素
可能的值:
clear:left; 在左侧不允许浮动元素
clear:right; 在右侧不允许浮动元素
clear:both; 在左右两侧均不允许浮动元素
clear:none; 默认值,允许浮动元素出现在两侧
3.clip 剪裁绝对定位元素
该属性不能用于"overflow"设置为"visible"的元素
可能的值:
clip:rect(top,right,bottom,left); 设置元素的形状
/*
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,
其中任一数值都可用auto替换,即此边不剪切
*/
clip:auto; 浏览器设置元素的形状。
4.cursor 规定要显示的光标的类型(形状)
可能的值:
url; 需被使用的自定义光标的URL
default;默认光标(通常是一个箭头)
auto;默认。浏览器设置的光标。
crosshair;光标呈现为十字架。
pointer;光标呈现为指示接的指针(一只手)
move;此光标指示某对可被移动。
e-resize;此光标指示矩形框的边缘可被向右(东)移动。
ne-resize;此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize;此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize;此光标指示矩形框的边缘可被向上(北)移动。
se-resize;此光标指示的矩形框的边缘可被向下及向右移动(南/东)。
sw-resize;此光标指示的矩形框的边缘可被向下及向左移动(北/西)。
s-resize;此光标指示矩形框的边缘可被向下移动(北/西)。
w-resize;此光标指示矩形框的边缘可被向左移动(西)。
text;此光标指示文本。
wait;此光标指示程序正忙(通常是一只表或沙漏)。
help;此光标指示可用的帮助(通常是一个问好或一个气球)。
5.display 规定元素应该生成的框的类型,即设置元素如何显示
可能的值:
none; 此元素不被显示。
block;此元素将显示为块级元素,此元素前后会带有换行符。
inline;默认,此元素会被显示为内联元素,元素前后没有换行符。
...
6.float 规定框是否应该浮动
可能的值:
left;图像或文本浮动在父元素的左边
right;图像或文本浮动在父元素的右边
none;图像或文本浮动显示在它在父元素中出现的位置
注:如果在一行中对于浮动元素而言空间太少,则这个元素会跳到下一行,这个过程会持续到有足够空间的位置为止。
7.overflow 规定当内容溢出元素框时发生的事情
可能的值:
visible;默认值。内容不会被修剪,会呈现在元素框之外
hidden;内容会被修剪,并且其余内容是不可见的
scroll;内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
inherit;规定应该从父元素继承overflow属性的值
8.position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值:
static;默认。位置设置为static的元素,它始终会处于页面流给予的位置(static元素会 忽略任何top、bottom、left或right声明)
relative;位置被设置为relative的元素,可将其移至相对于其正常位置的地方,因此"left:20px;"会将元素移至元素正常位置左边20个像素的位置
absolute; 位置设置为absolute的元素,可定位于相对于包含它的元素的指定坐标,此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。
fixed; 位置设置为fixed的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。不论窗口滚动与否,元素都会留在那个位置
relative与absolute的区别
(1).两者一般用在:在一个相对定位的元素里面放置一个绝对定期的元素
<div id="A" style="position:relative;">
<div id ="B" style="position:absolute;"></div>
</div>
(2).子元素B可以通过top, right, bottom, left来精确定位,定位的参考目标就是其具有相对定位属性的父级元素A
(3).absolute属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,未解决这个竞争,就产生了z-index(空间坐标系的Z轴),比较谁大,大的显示在上面
(4).如果父级元素A没有设置relative,那么B元素就会以body标签当做参考点
(5).元素A如果有margin属性,其值将作用于该元素的原来位置,由于原位置产生偏移,
该元素的最终位置将是margin与top, right, bottom, left共同作用后的位置,并且其周围元素的位置也将产生影响
(6).如果A,B都设置了top, right, bottom, left,对于B来说,其位置偏移的参考点都是A偏移后的位置,不是A的原始位置,如果B有margin,其参考点也是元素A偏移后的位置。
注:
a.当position属性值为relative时
对象原来占有的位置保留,其后面的对象按原来文档流规定自己的位置
top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有top起作用
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在,只有left起作用。
b.当position属性值为absolute时
对象从文档流中抽取出来,原占有的位置被后面的对象顶替下来
top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直位置保持不变
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变
9.z-index 设置元素的堆叠顺序
可能的值:
auto;默认,堆叠顺序与父元素相等
number; 如果为正,则离用户更近,为负数则表示离用户更远