5.定位（position）

最新推荐文章于 2024-08-24 13:47:49 发布

二十二644

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量537

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_61783164/article/details/121910961

版权

【1】position属性制定了元素的定位类型。

【2】静态定位：（static）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<!-- 静态定位:
					如果我们不写position属性的话，相当于默认效果就是静态定位
					静态效果：就是元素出现在他本该出现的位置。一般使用静态定位可以省略不写
		 -->
		<img src="img/大主宰.jpg" style="position: static;"/>
	</body>
</html>

【3】相对定位：（relative）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<!-- 
			相对定位：
			相对元素自身所在的原来的位置进行定位。
			可以设置left、right、top、bottom四个属性
			效果：在进行相对定位以后，元素原来的位置被保留了，被占住了--》保留站位，其他元素的位置不会移动
			一般情况下，right和left不会同时使用，top和bottom不会同时使用，两者选择一个方向即可。
			优先级：左上>右下
		 -->
		<div style="width: 31.25rem;height: 31.25rem;background-color: pink;">
			<div style="width: 6.25rem;height: 6.25rem;background-color: bisque;"></div>
			<div style="width: 6.25rem;height: 6.25rem;background-color: yellow;position: relative;bottom: 0.625rem;right: 1.25rem;"></div>
			<div style="width: 6.25rem;height: 6.25rem;background-color: green;"></div>
		</div>
	</body>
</html>

相对定位的应用场合：

（1）元素在小范围移动；

（2）结合绝对定位使用；

再说一个属性：z-index

设置堆叠顺序，设置元素谁在上谁在下。

注意：z-index属性要设置在定位的属性上

z-index的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<!-- 
			相对定位：
			相对元素自身所在的原来的位置进行定位。
			可以设置left、right、top、bottom四个属性
			效果：在进行相对定位以后，元素原来的位置被保留了，被占住了--》保留站位，其他元素的位置不会移动
			一般情况下，right和left不会同时使用，top和bottom不会同时使用，两者选择一个方向即可。
			优先级：左上>右下
		 -->
		<div style="width: 31.25rem;height: 31.25rem;background-color: pink;">
			<div style="width: 6.25rem;height: 6.25rem;background-color: bisque;position: relative;left: 0.625rem;z-index: 100;"></div>
			<div style="width: 6.25rem;height: 6.25rem;background-color: yellow;position: relative;bottom: 0.625rem;right: 1.25rem;z-index: 1;"></div>
			<div style="width: 6.25rem;height: 6.25rem;background-color: green;"></div>
		</div>
	</body>
</html>

【4】绝对定位：（absolute）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#outer{
				width: 31.25rem;
				height: 31.25rem;
				background-color: pink;
				margin-left: 18.75rem;
			}
			#div01{
				width: 6.25rem;
				height: 6.25rem;
				background-color: cornflowerblue;
				position: absolute;
				left: 1.875rem;
				top: 3.125rem;
			}
			#div02{
				width: 6.25rem;
				height: 6.25rem;
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="div01">111</div>
			<div id="div02">222</div>
		</div>
	</body>
</html>

暂时来说看到的效果：蓝色div相对body产生位移，相对body进行位置的改变，然后蓝色div发生位移后，原位置得到了释放。橙色div移动上去了！

实际开发中，我们往往让蓝色div在粉色div中发生位移效果：

配合定位来使用：

总结：

当给一个元素设置了绝对定位的时候它相对谁变化呢？它会向上一层一层的找父级节点是否有定位，如果直接找到body了也没有定位，那么就相对body进行变化。如果父级节点有定位（绝对定位，相对定位，固定定位），但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个原色就会相对父级位置产生变化。无论是上面的那一种，都会释放原来的位置，然后其他元素会占用那个位置。

开发中建议使用：父级节点relative定位，子级节点使用绝对定位。

【5】固定定位：（fixed）--->使用频率很高，重点

应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素的位置固定不动。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#mydiv{
				width: 3.125rem;
				height: 25rem;
				background-color: cadetblue;
				/* 固定定位 */
				position: fixed;
				right: 0rem;
				top: 18.75rem;
			}
		</style>
	</head>
	<body>
			<div id="mydiv"></div>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
			<p>你好</p>
	</body>
</html>

效果展示：

二十二644

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5.定位（position）

【1】position属性制定了元素的定位类型。【2】静态定位：（static）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> &.
复制链接

扫一扫