CSS定位属性 position 相关介绍

最新推荐文章于 2024-11-04 23:25:00 发布

姓名别名曾用名

最新推荐文章于 2024-11-04 23:25:00 发布

阅读量194

点赞数 1

文章标签：定位 css html html5

本文链接：https://blog.csdn.net/m0_46387541/article/details/104461689

版权

position属性用来定义元素的定位方式。

定位的相关属性值有：

static 默认值
absolute 绝对定位
fixed 固定定位
relative 相对定位
sticky 粘性定位（CSS3新增）

定位的作用:

在正常情况下，可以让一个元素覆盖在另一个元素上；
需要移动一个元素的位置时，可通过top、right、bottom、left属性来移动元素的位置；
可以固定某个容器在浏览器窗口的某个位置不动；
可以实现吸顶效果。

以下就五个属性值展开介绍：

一、position: static; 默认值，无定位

此时 top、right、bottom、left 属性无效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{margin: 0; padding: 0;}
			.a1{width: 50px;height: 50px;background: yellow;}
			.a2{width: 150px;height: 80px;background: skyblue;
				position: static;
			}
			.a3{width: 100px;height: 100px;background: blue;}
			.a4{width: 80px;height: 150px;background: pink;
				position: static;
			}
		</style>
	</head>
	<body>
		<div class="a1">第一个div</div>
		<div class="a2">a2第二个div</div>
		<div class="a3">a3第三个div</div>
		<div class="a4">a4第四个div</div>
	</body>
</html>

基本效果如图所示：
在这里插入图片描述

二、position: absolute; 绝对定位

1、当一个元素设定为绝对定位后，该元素会脱离文档流。
          如果下面的元素没有添加定位，绝对定位的元素会将其覆盖，文字也会被盖住(即全脱离)。
                在上面的结构中，给.a2加绝对定位后：

2、层叠顺序
           如果多个元素同时给了绝对定位，他们之间的叠层顺序是：结构在后的元素在最上面。
                 给.a2、.a3、.a4加绝对定位后：
                                         在这里插入图片描述
           如果想要改变定位之后的层叠顺序，可以通过属性 z-index 来改变。
           z-index的默认值是auto，不带单位、可给负值。数值越大，层越靠上。
                    给.a2、.a3、.a4加绝对定位，同时.a2添加属性 z-index: 1;后：
                                         在这里插入图片描述

3、移动位置
           定位之后想要移动位置，除了可以使用margin等以外，还可以用left、right、top、bottom作为属性来移动。
           要注意的是，使用left/right/top/bottom移动位置时，绝对定位元素的参照物有两种情况：
                 1）如果其父元素没有定位，那么参照物为浏览器的第一屏；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{margin: 0; padding: 0;}
			.a1{width: 50px;height: 50px;background: yellow;}
			.a2{width: 150px;height: 80px;background: skyblue;
				position: absolute;
				right: 20px; 
				bottom: 0; 
			}
			.a3{width: 100px;height: 100px;background: blue;}
			.a4{width: 80px;height: 150px;background: pink;}
			.box{
				width: 110px;
				height: 110px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="a1">第一个div</div>
		<div class="box">a2的父元素
			<div class="a2">a2第二个div</div>
		</div>
		<div class="a3">a3第三个div</div>
		<div class="a4">a4第四个div</div>
	</body>
</html>

                    在这里插入图片描述
               2）如果其父元素有定位，参照物为 static定位以外的第一个父元素。
                                给.box加定位之后:
                                                在这里插入图片描述

三、position: fixed;固定定位

1、添加固定定位的元素，该元素会固定在某个位置不动，并且会脱离文档流。
2、用left/right/top/bottom移动位置时的参照物，只有1个，是浏览器的当前窗口。
3、层叠顺序:
多个元素同时给了固定定位，结构在后的覆盖在上面。也可使用z-index来改变层叠顺序。

四、position:relative;相对定位

1、相对定位之后的元素是占浏览器位置的，不脱离文档流。
2、用left/right/top/bottom移动位置时，参照物是自己的初始位置。
移动位置之后，原来的空间还在。

<style type="text/css">
			body{margin: 0; padding: 0;}
			.a1{width: 50px;height: 50px;background: yellow;}
			.a2{width: 150px;height: 80px;background: skyblue;
				position: relative;
				left: 40px;
				bottom: 40px;
			}
			.a3{width: 100px;height: 100px;background: blue;}
</style>

                                          在这里插入图片描述
3、层叠顺序
        多个元素给相对定位之后，如果没有移动位置，那么他们之间就不会有覆盖现象。
        如果移动了位置，那么后面的元素还是会覆盖前面的元素。此时，可以用z-index改变层叠顺序。

五、position: sticky;粘性定位

        粘性定位是相对和固定定位的混合体，一般用来实现导航的吸顶效果。
        默认情况下，该元素被视为相对定位，直到它超过一定的范围之后，此时它被视为固定定位。
        因为sticky为CSS3新增加的属性，对于浏览器存在兼容问题，而JS能更好的实现吸顶效果，这里不再赘述。