前端学习：CSS定位position属性的学习

最新推荐文章于 2023-12-25 17:00:00 发布

吴小斌的学习之旅

最新推荐文章于 2023-12-25 17:00:00 发布

阅读量208

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/wb13367115356/article/details/119514831

版权

首先，position属性是用来定位元素的，它是搭配left right top bottom来使用的，分别代表离左边的距离，离右边的距离......

简单的一个例子进行演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				color: white;
				font-size: 24px;
				height: 2000px;
			}

			.big {
				background-color: slateblue;
				padding: 30px;
			}

			.box1,
			.box2,
			.box3 {
				height: 100px;
				padding: 10px;
			}

			.box1 {
				background-color: orangered;
			}

			.box2 {
				background-color: pink;
			}

			.box3 {
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="box1">
				A
			</div>
			<div class="box2">
				B
			</div>
			<div class="box3">
				C
			</div>
		</div>
	</body>
</html>

定义了四个div，其中三个div嵌套在外层大div中

1，position属性常用的有这几个值：static relative absolute fixed

2，如果s不设置position属性，那么浏览器会默认的给其定义为static(静态的)

并且，如果是是static定位的话，给其进行left right等一系列操作是不会生效的，因为元素是静态的不能进行移动。

我们先给box2进行position属性赋值，我们先从fixed开始演示

fixed：代表固定的，是相对于整个窗口来进行定位的

当我们给box2进行fixed定位的时候，并且给其进行如下操作
.box2 {
				background-color: pink;
				position: fixed;
				left: 0;
				top: 0;
    	}
我们拖动滚动条

发现box2是不会随着我们移动的，相当于是固定在页面上了，这就是fixed定位

现在我们将box2设置为relative定位，并且让其距离左边100px，顶部100px，看一下效果

可以看到其相对于以前本身的位置进行了移动，这就叫做相对定位，是相对于自己以前的位置进行定位的，不管是距离左边还是顶部都是相对于自己以前本身的位置进行移动的。

来到最后一个属性值：absolute绝对的

我们给box2进行absolute定位，并且也让其距离左边100px，顶部100px

看一下效果：

看到这肯定很多人发出了疑问，为什么是这样的呢？

查阅文档我们知道，absolute定位标准是：依据其父元素中非static定位的元素进行定位的，听起来有点绕，听我慢慢解释：

首先我们这个box2的父元素是外面的大盒子big，那么它是什么定位呢？，好，它没给任何的position属性值，那么它就是static的，换句话说，box2设置为绝对定位了之后，是不糊参考它进行定位的，是会一直网上找，那么就找到了body，那么body也同样是static的，那么最终就会找到整个窗口，那么它就是依据整个窗口来进行定位的。

我们继续证明这个想法，现在给big一个定位，只要不是static的都可以，我们给他一个relative定位，并且我们让box2距离左边0px，距离下部也为0px

我们看到的效果图是这样的：

现在我们去掉big的relative，让他变为static，看看效果：

结果正符合我们预期的效果，距离窗口左边0px，下部0px

那么定位常用的属性值就是这些了，希望可以帮到正在学习CSS的同学们。

吴小斌的学习之旅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习：CSS定位position属性的学习

首先，position属性是用来定位元素的，它是搭配left right top bottom来使用的，分别代表离左边的距离，离右边的距离......简单的一个例子进行演示<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ margin:
复制链接

扫一扫