【CSS】8-css定位_css 八方向云台-CSDN博客

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/125993257

本文深入解读CSS定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。重点讲解z-index属性的显示优先级，以及各定位方式的使用场景和特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

8-css定位

显示优先级

z-index属性，数值越大越靠上

1.relative:相对定位

1.相对于元素原来的位置定位
2.top,left,bottom,right设置定位置
3.不会脱离文档流，原来的位置仍然保留

例子：
	#div1 {
		background-color: green;
		
		/* 相对定位 */
		position: relative;
		top: 50px;
		left: 50px;
		
		/* 显示优先级，数值越大越靠上 */
		z-index: 300;
		
	}

2.absolute:绝对定位

1.相对有定位的祖宗标签定位，如果未找到，会相对body定位
2.会脱离文档流，原来的位置不保留

例子：
	#div2 {
		background-color: yellowgreen;
		
		/* 绝对定位 */
		position: absolute;
		top: 200px;
		left: 0px;
		
		z-index: 100;
		
	}

3.fixed:固定定位

1相对于浏览器窗口定位，位置不会随滚动条滚动而变化
2.会脱离文档流，原来的位置不保留

    #div3 {
    		background-color: pink;
    		
    		/* 固定定位 */
    		position: fixed;
    		top: 200px;
    		left: 0;
    		
    	}

5.sticky:粘性定位

1.相对浏览器窗口定位，达到指定定位值时会出现固定定位的效果
2.不会脱离文档流，原来的位置仍然保留

	#div4 {
			background-color: skyblue;
			
			/* 粘性定位 */
			position: sticky;
			top: 10px;
			
			z-index: 200;
		}