CSS练习1---制作奥运五环

最新推荐文章于 2024-08-05 17:30:48 发布

Mr晓

最新推荐文章于 2024-08-05 17:30:48 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/lxd_113/article/details/83717264

版权

本文介绍了如何使用CSS将奥运五环固定在屏幕正中央，讲解了position属性的fixed、absolute和relative定位的区别，并提供了HTML和CSS代码实现五环效果。

摘要由CSDN通过智能技术生成

使用CSS制作一个位置固定在屏幕正中间的奥运五环

1. 关键点：

将元素固定到屏幕中间的写法

.warrper {
	position: fixed;
	left: 50%;
	top: 50%;
	background: transparent;
	width: 600px;
	height: 400px;
	margin-left: -300px;
	margin-top: -200px;
}

以上写法为固定写法，注意这里position属性的值要使用fixed。

absolute定位和relative定位的不同
relative：1.在新的一层上定位，但是保留原来的位置；
2.相对于自己出生的位置进行定位
absolute：1.在新的一层上定位，并且脱离原来的位置；
2.相对于最近的有定位元素的父级进行定位，如果没有，那么相对于文档进行定位。
一般情况下，用relative来为参照物定位，用absolute来定位具体的内容。

2. 代码

html代码

<body>
		<div class="warrper">
			<div class="circle black position1"></div>
			<div class="circle red position2"></div>
			<div class="circle blue position3"></div>