CSS学习笔记9-定位（position）

最新推荐文章于 2024-09-11 20:31:47 发布

糯米味儿的粽子

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量199

点赞数

分类专栏： # CSS 文章标签： css html html5 css3 定位

本文链接：https://blog.csdn.net/emmm520/article/details/119900419

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS学习笔记9-定位（position）

定位-position

position的含义指定位，position 属性指定了元素的定位类型（static、relative、fixed、absolute 或 sticky）。

元素其实是使用 top、bottom、left 和 right 属性定位的。但在使用这几个属性之前，需要先设置 position 属性。根据不同的 position 值，它们的工作方式也不同。

静态定位-static

使用方式：position: static;

静态定位的元素不会受到 top, bottom, left, right影响。

相对定位-relative

相对定位是相对自身原来的位置进行偏移，可使用 top、bottom、left 和 right。

注意top：10px; 是相对上边偏移了10px，即向下偏移10px，而不是向上偏移10px，其余同理。

代码演示

首先通过浮动在一个大盒子中并排放置三个小盒子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style type="text/css">
		.b1{
			width: 200px;
			height: 100px;
			background: green;
			float: left;
			margin-left: 20px;
			margin-top: 20px;
			border: 2px grey solid;
		}
		.b2{
			width: 200px;
			height: 100px;
			background: yellow;
			float: left;
			margin-left: 20px;
			margin-top: 20px;
			border: 2px grey solid;
		}
		.b3{
			width: 200px;
			height: 100px;
			background: blue;
			float: left;
			margin-left: 20px;
			margin-top: 20px;
			border: 2px grey solid;
		}
		.box{
			width: 690px;
			height: 140px;
			border: 5px grey dashed;
		}

	</style>
</head>
<body>
	<center>
		<div class="box">
			<div class="b1"></div>
			<div class="b2"></div>
			<div class="b3"></div>
		</div>
	</center>
</body>
</html>

显示效果如下：

然后在中间小盒子的样式 .b2{…} 中加入如下代码:

position: relative;
left:80px;
top:20px;

显示效果如下：
在这里插入图片描述

绝对定位-absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，会以浏览器窗口为基准进行定位。

代码演示

实现下图的效果，并且当鼠标移动到小方块时，小方块颜色会改变。

要求：使用绝对定位，不允许使用浮动。
在这里插入图片描述

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type="text/css">

		.box{
			width: 320px;
			height: 320px;
			border: solid 2px grey;

			/*作用是让大盒子有了定位属性，让小盒子以大盒子为基准进行绝对定位*/
			position: relative;
		}

		.b1{
			width:100px;
			height: 100px;
			background:green;
		}

		/*设置伪类样式，用于鼠标悬浮的特效*/
		.b1:hover{
			/*设置阴影*/
			box-shadow: 20px 10px 5px;
			/*设置背景颜色*/
			background: red;
		}
	</style>
</head>
<body>
	<center>
		<div class="box">
			<div class="b1" style="position: absolute;left: 10px;top: 10px;"></div>
			<div class="b1" style="position: absolute;right: 10px;top: 10px;"></div>
			<div class="b1" style="position: absolute;left: 110px;top: 110px;"></div>
			<div class="b1" style="position: absolute;left: 10px;bottom: 10px;"></div>
			<div class="b1" style="position: absolute;right: 10px;bottom: 10px;"></div>
		</div>
	</center>
</body>
</html>

显示效果如下：
在这里插入图片描述

鼠标悬停时，小盒子的效果如下：
在这里插入图片描述

糯米味儿的粽子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记9-定位（position）

CSS学习笔记9-定位（position）定位-positionposition的含义指定位，position 属性指定了元素的定位类型（static、relative、fixed、absolute 或 sticky）。元素其实是使用 top、bottom、left 和 right 属性定位的。但在使用这几个属性之前，需要先设置 position 属性。根据不同的 position 值，它们的工作方式也不同。静态定位-static使用方式：position: static;静态定位的元素不
复制链接

扫一扫

专栏目录