Python学习 Day19 CSS定位

最新推荐文章于 2023-06-21 13:55:44 发布

ShengXIABai

最新推荐文章于 2023-06-21 13:55:44 发布

阅读量335

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ShengXIABai/article/details/113804092

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

CSS定位

（一）静态定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			静态定位：
			如果我们不写position属性，相当于默认效果就是静态定位
			静态效果：元素出现在本该出现的位置。一般使用静态定位可以省略不写。
		-->
		<img src="img/消失的13级台阶.jpg" style="position: static;" />
	</body>
</html>

（二）相对定位

相对定位：
相对元素自身原来的位置进行定位
可以设置left，right，top，bottom四个属性
效果：在进行相对定位以后，元素原来所在的位置被保留了，被占用了，保留占位其他元素的位置不会发生移动
一般情况下，left和right不会同时使用，top和bottom也不会同时使用，选择一个方向即可
优先级：左上>右下
应用场景：元素小范围移动时；结合绝对定位使用
z-index属性：设置堆叠顺序，，设置元素谁在上谁在下，需设置在

原页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="width: 500px;height: 500px;background-color: pink;">
			<div style="width: 100px;height: 100px;background-color: darkgoldenrod;"></div>
			<div style="width: 100px;height: 100px;background-color: darkgreen;"></div>
			<div style="width: 100px;height: 100px;background-color: orangered;"></div>
		</div>
	</body>
</html>

在这里插入图片描述

加入相对定位

在这里插入图片描述
相对定位效果

加入z-index属性

（三）绝对定位

当给一个元素设置绝对定位以后，它会向上逐层寻找父节点是否有定位，若一直未找到，则相对body进行定位
如果父节点有定位（absolute，relative，fixed）但是一般会配合使用父级为相对定位，当前元素为绝对定位
但无论是那种效果，当前元素发生位移后都会释放原来的位置，其位置被其他元素占用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		#outer{
			width: 500px;
			height: 500px;
			background-color: pink;
			margin-left: 300px;
		}
		#div01{
			width: 100px;
			height: 100px;
			background-color: blueviolet;
		}
		#div02{
			width: 100px;
			height: 100px;
			background-color: orange;
		}
			
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="div01">111</div>
			<div id="div02">222</div>
			
		</div>
	</body>
</html>