一看就懂的CSS定位

最新推荐文章于 2024-07-24 21:03:00 发布

徐小姐的先生

最新推荐文章于 2024-07-24 21:03:00 发布

阅读量87

点赞数

文章标签： css html 定位

本文链接：https://blog.csdn.net/qq_46456984/article/details/105028084

版权

在CSS中，除了运用浮动定位，也可以用定位布局，显得更为准确方便。`（自己目前正在学习，有不对的地方，期望各位大佬指出错误）

` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322150919194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2NDU2OTg0,size_16,color_FFFFFF,t_70)

默认在网页中的位置
position:;就是一个设置定位的属性，分为四种。
水平位置：left right
垂直位置：top bottom

绝对定位

position:absolute;/*绝对定位，脱离文本流，不占据位置*/
left:30px;/*距离左边的距离*/
right:30px;/*距离右边的距离*/
top:30px;/*距离上边的距离*/
bottom:30px;/*距离下边的距离*/

position:absolute;不管父级元素，默认情况下参考body浏览器，绝对定位，脱离文本。外边距和绝对定位并不冲突，距离是两者之和。

.box{
width:400px;
height:400px;
background: yellow;
position:absolute;/绝对定位/
left:100px;
top:100px;
margin:100px;/外边距/
}
元素距离浏览器上边100+100=200px。外边距加上定位。
左边100+100=200px。外边距加左定位。

相对定位
position:relative;/占据文档流位置/
left:30px;/相对于元素原来位置往左移动30px./

固定定位
position:fixed;
1.脱离文档流，不占据位置。
2.相对于页面当前位置，无论上下滑动，都不会动。

黏性定位
position：sticky;
1.页面到达一定高度时脱离文档流，向下滑动时一直在固定的位置，不向下滑动时和正常情况一样。
2.效果是吸附在浏览器顶部（常用于定位导航栏）
3.只有top和left属性有效果。

当有父级时，父级身上有定位，（默认static除外）
子级的absolute的相对定位以父级位参考物，也叫包含块。父级时position:relative;

下面是各个定位的代码，可复制运行测试
固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*	清除元素之间默认的间距*/
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:200px;
				height:200px;
				background: yellow;
				position:absolute;/*固定定位*/
				left:300px;
				top:50px;
				font-size:20px;
				font-weight:bold;
			}
			
		</style>
	</head>
	<body>
		<div class="box">absolute固定定位</div>
	</body>
</html>

相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*	清除元素之间默认的间距*/
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:400px;
				height:400px;
				border:4px solid brown;
				position:relative;/*固定定位*/
				left:100px;
				top:50px;
				margin: 200px auto;/*上下外边距200，左右居中*/
			}
			.box1{
				width:100px;
				height:100px;
				background: red;
				position:relative;/*固定定位*/
				left:100px;/*原来位于box父级默认左上角*/
				top:50px;
				font-size:20px;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">relative相对定位</div>
			</div>
	</body>
</html>

固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*	清除元素之间默认的间距*/
			*{
				margin:0;
				padding:0;
			}
			body{
				height:9000px;/*使页面长度增加，滑动页面，box仍在固定位置*/
			}
			.box{
				width:200px;
				height:200px;
				background: red;
				position:fixed;/*固定定位*/
				left:100px;
				top:300px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">fixed固定定位</div>
			</div>
	</body>
</html>

黏性定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*	清除元素之间默认的间距*/
			*{
				margin:0;
				padding:0;
			}
			body{
				height:9000px;/*使页面长度增加，滑动页面，box仍在固定位置*/
			}
			.top{
				height:50px;
				background: green;
			}
			.box{
				width:900px;
				height:100px;
				background: red;
				position:sticky;/*固定定位*/
				left:400px;
				top:10px;/*黏性定位距离上边缘10px*/
			}
			.con{
				height:600px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="top"></div><!--顶部-->
		<div class="box"></div><!--黏性定位例子，导航栏-->
		<div class="con"></div><!--内容-->
	</body>
</html>

当有父级时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*	清除元素之间默认的间距*/
			*{
				margin:0;
				padding:0;
			}

			.box{/*父级*/
				width:400px;
				height:400px;
				background: red;
				position:relative;
				left:400px;
				top:100px;
			}
			.con{
				width:100px;
				height:100px;
				background:blue;
				position:absolute;
				left:40px;
				top:100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="con">相对于父级定位</div>
		</div>
	</body>
</html>

徐小姐的先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一看就懂的CSS定位

在CSS中，除了运用浮动定位，也可以用定位布局，显得更为准确方便。`（自己目前正在学习，有不对的地方，期望各位大佬指出错误） `![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322150919194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGV...
复制链接

扫一扫