CSS 定位

一、首先介绍下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; 如果为正，则离用户更近，为负数则表示离用户更远