css定位
定位 - position
定位:绝对定位、相对定位、固定定位
- 相对定位:
position:relative;
用来为元素(标签)进行位置微调,给绝对定位做参考
四个属性:top,bottom,left,right
相对定位的元素进行位置移动时,是相对于自己原来的位置移动
- 绝对定位:
position:absolute;
让元素进行任意的位置移动
绝对定位的元素进行移动时,如果有父元素,那么要看一下父元素本身是否具有定位属性(相对定位、绝对定位、固定定位),如果有就以当前父元素为参考,如果父元素没有定位属性,那么就继续向上找。
一般用父相子绝(父元素相对定位子元素绝对定位),目的是让网页结构更加的稳定。
- 固定定位:
position:fixed;
元素移动参考以浏览器窗口为准
注:
-
相对定位没有让元素脱离文本流和文档流,理解:相对定位还保留了它原本的空间,它相当于在普通文档流的位置还占有空间,然后仅仅把表现出来的内容移位了。而绝对定位在原来那里不占有空间,是实实在在地全部移动。
-
绝对定位时bottom属性只是相对于浏览器的第一个界面。
雪碧图
也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
background-position 属性用于设置背景图像的起始位置。对于雪碧图推荐使用MarkMan这个软件来获取图片的坐标信息。需要注意的是设置background-position时值一般是设置为负数,例如background-position:-400px -200px;
其意思是将图片向x轴移动400px,向y轴移动200px。