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。

原文地址:https://www.cnblogs.com/pallcard-LK/p/7088853.html