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

最新推荐文章于 2026-01-22 16:18:53 发布

原创最新推荐文章于 2026-01-22 16:18:53 发布 · 1.4k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

前端专栏收录该内容

3 篇文章

订阅专栏

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

使用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>
			<div class="circle yellow position4"></div>
			<div class="circle green position5"></div>
		</div>
	</body>

css代码

* {
	padding: 0;
	margin: 0;
}

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

.black {
	border-color: black;
}

.red {
	border-color: red;
}

.blue {
	border-color: blue;
}

.green {
	border-color: green;
}

.yellow {
	border-color: yellow;
}

.circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border-width: 5px;
	border-style: solid;
}

.position1 {
	position: absolute;
    left: 130px;
    top: 100px;
    z-index: 3;
}

.position2 {
	position: absolute;
    left: 250px;
    top: 100px;
}

.position3 {
	position: absolute;
    left: 370px;
    top: 100px;
}

.position4 {
	position: absolute;
    top: 170px;
    left: 190px;
}

.position5 {
	position: absolute;
    top: 170px;
    left: 310px;
}

3.效果

在这里插入图片描述