CSS定位学习打卡

最新推荐文章于 2023-04-30 20:10:23 发布

gegejiawei

最新推荐文章于 2023-04-30 20:10:23 发布

阅读量159

点赞数

分类专栏： Web前端开发工程文章标签： css

本文链接：https://blog.csdn.net/gegejiawei/article/details/105819225

版权

Web前端开发工程专栏收录该内容

27 篇文章 0 订阅

订阅专栏

具体分类

position:
1、relative – 相对
2、absolute – 绝对
3、static – 无定位
4、fixed – 固定

相对定位

1、相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始卫视占据的控件会被保留。
2、position:relative
3、案例代码演示
4、总结：

相对定位的偏移是自己之前的位置作为参照进行的一个偏移
相对定位不作为元素单独显示出来，而是作为父容器去包含其他元素而使用
子绝父相 – （子元素设置绝对定位，父元素设置相对定位）

绝对定位

1、绝对定位相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就像对于最初的包含块（body）
2、position:absolute

z-index的使用

概念：层叠模式
总结：
1、决定谁在前面，谁在后面，数字大小上不封顶
2、数值不适宜设置的过大，没意义。但是也适宜设置的过小，因为以后的页面的div很多，可以让他们一起重叠显示

固定定位

1、相对于浏览器窗口进行定位
2、position:fixed

总结

1、相对定位参照物是本身，绝对定位参照物是最近的父元素
2、相对定位是不会破坏文档流，而绝对定位是破坏文档流
3、搭档起来使用。一般是相对定位作为父级的单位，而绝对定位
是作为子级单位使用的。
4、一般情况下：子绝父相

综合案例 – 购物车

1、效果图
在这里插入图片描述

2、代码

<!DOCTYPE html>
<html>
<head>
	<title>review0428-5</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div0{
			width: 500px;
			height: 300px;
			position: relative;
			background-color: #667766;
			top: 150px;
			left: 300px;
		}
		.img1{
			width: 30px;
			height: 45px;
			position: absolute;
			bottom: 10px;
			right: 50px;
		}
		.div1{
			width: 300px;
			height: 200px;
			background-color: red;
			position: absolute;
			top: 60px;
			left: 100px;
		}
		.div2{
			width: 30px;
			height: 45px;
			background-color: blue;
			border-radius: 20px/30px;
			text-align: center;
			line-height: 45px;
			color: #ffffff;
			position: absolute;
			left: -10px;
			top: -10px;
		}
	</style>
</head>
<body>
	<div class="div0">
		<div class="div1">
			<div class="div2">5</div>
			<img class="img1" src="cart.svg">
		</div>
	</div>
</body>
</html>