Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

CSS定位

前端CSS

发布于：Jun 5, 2025

一.相对定位 position:relative

  1. 根据自身位置偏移
  2. 不脱标，占位即位置改变后原来的位置区域保留
  3. 设置相对定位的标签显示模式不变如：div 设置完相对定位后仍是块级
1
2
3
4
5
div{
	position:relative;
	top:100px;
	left:100px
}

二.绝对定位 position:absolute

  1. 参照最近的父级元素定位
  2. 脱标，不占位，设置绝对定位后原来所在位置不保存
  3. 设置相对定位显示模式宽高生效（具备了行内块的特点）
  4. 设计技巧：子组件绝对定位，父组件相对定位（子绝父相）子组件会相对父组件=>在父组件的范围内绝对定位：例如图片右上角x点击关闭图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div{
	//让div居中与屏幕
	position:absolute;
	width:100px;
	height:100px;
	
	//此时div的左上角居中
	left:50%;
	top:50;
	
	//左移，上移自身宽高一半完成居中
	//margin-left:-100px;
	//margin-top:-100px;
	//或者直接使用水平-50%，垂直-50%(基于自身)
	transform:translate(-50%,-50%);
}

三.固定定位 position:fixed

  1. 元素的内容在网页滚动中不会改变

  2. 脱标不占位置

  3. 参照位置浏览器窗口

  4. 显示模式改变具备行内块特点，宽高设置生效

1
2
3
4
5
6
7
8
	//div定位到窗口右上角
	position:fixed;
	top:0;
	right:0;
	
	with:500px;//宽度生效
	
}

总结图片

更新于：Jun 6, 2025

css

评论