css定位

定位 - position

定位：绝对定位、相对定位、固定定位

• 相对定位：

position:relative;用来为元素（标签）进行位置微调，给绝对定位做参考

四个属性：top，bottom,left,right

相对定位的元素进行位置移动时，是相对于自己原来的位置移动

• 绝对定位：

position:absolute;让元素进行任意的位置移动

绝对定位的元素进行移动时，如果有父元素，那么要看一下父元素本身是否具有定位属性(相对定位、绝对定位、固定定位)，如果有就以当前父元素为参考，如果父元素没有定位属性，那么就继续向上找。

一般用父相子绝(父元素相对定位子元素绝对定位)，目的是让网页结构更加的稳定。

• 固定定位：

position:fixed;元素移动参考以浏览器窗口为准

注：

1. 相对定位没有让元素脱离文本流和文档流，理解：相对定位还保留了它原本的空间，它相当于在普通文档流的位置还占有空间，然后仅仅把表现出来的内容移位了。而绝对定位在原来那里不占有空间，是实实在在地全部移动。

2. 绝对定位时bottom属性只是相对于浏览器的第一个界面。

雪碧图

也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

background-position 属性用于设置背景图像的起始位置。对于雪碧图推荐使用MarkMan这个软件来获取图片的坐标信息。需要注意的是设置background-position时值一般是设置为负数，例如background-position:-400px -200px;其意思是将图片向x轴移动400px，向y轴移动200px。