也能画奥运五环？HTML+CSS手把手教你搞定环环相扣特效
小白也能画奥运五环？HTML+CSS手把手教你搞定环环相扣特效
说真的，谁还没被这五个破环保整过心态？我见过太多人了，一听说要用纯CSS画奥运五环，第一反应就是"这得SVG吧？""canvas跑一波？"甚至还有直接上WebGL的，兄弟你醒醒，咱们只是个写页面的，不是搞图形学的。今天我就把这事儿给你整明白——就用最土的div，最基础的CSS，把这五个环环相扣的玩意儿给盘出来。特别适合那些刚搞明白盒模型、刚分清relative和absolute有啥区别的新手，这题拿来练手简直绝配，比什么登录框有意思多了。
先说好，今天不搞那些花里胡哨的预处理器，也不搬PostCSS，就是原生CSS，就像你妈做的手擀面，看着朴素，吃起来扎实。
技术底裤先给你扒了
其实真没你想的那么复杂，核心就老三样：绝对定位摆位置、z-index控层叠、border-radius搓圆形。完事儿。什么transform啊clip-path啊，今天统统封印，就用最朴素的语法糖，看看到底能不能成。
有人可能不服，说"现在都2026年了谁还写border-radius啊，直接用圆角插件不香吗"。香个屁，你这是练基本功，基本功懂不懂？就像学厨先得练刀工，不能一上来就分子料理。
先说画一个环。这东西本质就是个空心的圆，对吧？在CSS里怎么搞？给div设个宽高，然后border-radius: 50%，但是注意，我们要的是环，不是个实心圆饼。所以很多人第一反应是搞两个div嵌套，一个大的做外圈，一个小的做内圈，然后小的盖在大的上面，把中间遮住……停！你这是自找麻烦，直接在border上做文章不就完了？
看代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奥运五环练手</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 这行先记着，后面有大用 */
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* 灰色背景方便看白色环 */
}
/* 这就是一个环的基础CSS */
.ring {
width: 120px;
height: 120px;
border: 12px solid #0085C7; /* 先随便给个蓝色 */
border-radius: 50%; /* 搓圆 */
position: absolute; /* 等会儿要叠罗汉，必须绝对定位 */
}
</style>
</head>
<body>
<div class="ring"></div>
</body>
</html>
看到没，就一个div，border-radius: 50%直接干成圆形，然后border设粗一点，中间自然就透明了，露出了body的背景色，这就是环。简单粗暴，大道至简。那些搞两个div的，我只能说你们被盒子模型PUA了。
但是这里有个坑，你得注意box-sizing: border-box。这玩意儿干嘛的？就是告诉浏览器：我设了width: 120px，那就是整个盒子120px宽，border别给我往外面扩。如果不加这个，你会怀疑人生——明明算的坐标是对的，怎么就是对不齐呢？因为border-width是往外长的，你的实际占位变成了120px + 12px*2 = 144px。血与泪的教训，我当初调了半小时才发现是这个鬼东西在搞我。
五个环到底咋排？别瞎猜了
好了，现在你会画一个环了，问题是奥运他不要有五个啊，而且还得是蓝、黄、黑、绿、红，还得两排，上排三个下排两个，还得环环相扣。这就涉及到布局了。
很多人一开始的思路是：flex布局啊！grid啊！兄弟，你看那五个环的位置，是交错的，flex是排一行或者一列的，你这错位的怎么搞？所以还得是绝对定位，一个一个摆。听起来很low对吧？但绝对定位在这种固定尺寸的装饰性图形里，反而是最稳的，坐标写死，天下太平。
关键是这个排列逻辑。上排是蓝、黑、红，从左到右；下排是黄、绿，插在上排中间的空隙里。但是注意，黄环不是完全在下排左边，而是要往左偏一点，插到蓝环和黑环中间去；绿环也是，要插到黑环和红环中间。
上代码，先搭骨架：
<body>
<div class="container">
<div class="ring blue"></div> <!-- 蓝 -->
<div class="ring yellow"></div> <!-- 黄 -->
<div class="ring black"></div> <!-- 黑 -->
<div class="ring green"></div> <!-- 绿 -->
<div class="ring red"></div> <!-- 红 -->
</div>
</body>
css部分：
.container {
position: relative; /* 父容器得相对定位，不然子元素的绝对定位会飘到body去 */
width: 400px;
height: 200px;
/* border: 1px solid red; */ /* 调试用，看容器边界 */
}
.ring {
width: 100px;
height: 100px;
border: 10px solid;
border-radius: 50%;
position: absolute;
}
/* 先不管穿插，把基础位置定了 */
.blue { border-color: #0085C7; left: 0; top: 0; }
.yellow { border-color: #F4C300; left: 55px; top: 55px; } /* 往下往右偏一点 */
.black { border-color: #000000; left: 110px; top: 0; }
.green { border-color: #009F3D; left: 165px; top: 55px; }
.red { border-color: #DF0024; left: 220px; top: 0; }
你发现没，我这里left值不是等间距的。如果是等间距，应该是0, 110, 220这样，但我第二排给搞成了55, 165，这就是为了让它们错开，制造那种"下排插进上排缝隙"的感觉。这个55px怎么来的？经验值，看着舒服就行，你也可以试试60、50，微调。
但是现在你打开浏览器一看，卧槽，五个饼子叠在一起，完全没有环环相扣的感觉啊！因为现在的层叠顺序是DOM顺序，后来的盖在先来的上面。red在最后，所以red在最上面，把green盖住了，green把black盖住，一路盖下来。这不对，我们要的是交替的。
z-index这场恶战，你真的懂吗？
这就是今天这玩意儿最难的部分了——层叠上下文。说实话，很多工作两三年的前端，都不一定能第一时间反应过来这个五环的z-index该怎么设。
直观上你想，蓝黑红在上排，黄绿在下排，那是不是蓝黑红z-index设高点，黄绿设低？比如blue: 3, black: 3, red: 3, yellow: 1, green: 1？那你打开看看，确实黄绿在下排了，但问题是——黄绿被上排 completely 挡住了啊！你看不到它们"穿"过去的效果了。
所以这就涉及到奥运五环的视觉欺骗术。你有没有想过，这五个环其实是无法实现"真正"的物理穿插的？在一个二维平面上，A环压着B环，B环就肯定在A环下面，怎么可能A环的一部分压着B，另一部分又被B压呢？这在单个元素层面上是不可能的。
所以奥运五环的做法是视觉错位。你看那个黄色环，它其实和蓝色环、黑色环都有交集。如果黄色要"穿过"蓝色，意味着黄色的左半部分应该在蓝色下面，右半部分在蓝色上面？不对，仔细看奥运五环，你会发现其实是这样：
蓝环在最底下（或者说部分被遮），然后黄环穿过蓝环，但是被黑环压住，同时又穿过黑环？不，我乱了。咱们冷静分析一下实际的层叠关系。
真实情况是：
- 上排的蓝、黑、红，它们之间其实是没有互相覆盖的，只是并排
- 下排的黄，它需要"穿过"蓝和黑之间的空隙
- 但是黄环作为一个整体，不可能同时在蓝上面又在黑下面
所以真相是，你看的那个"环环相扣"，其实是假的。黄环并没有真的穿过蓝环，它只是有一部分看起来像是在蓝环下面。不对，我再看一眼五环……哦，我搞反了。实际上，奥运五环的标准画法里，每个环都是连续的，但是交叠处确实有上下关系。
正确的层叠逻辑应该是：
- 蓝环被黄环压住（在黄蓝交界处，黄在上）
- 但黄环又被黑环压住（在黄黑交界处，黑在上）
- 同时绿环被黑环压住，但被红环压住？不对
我查了一下（假装查了一下，其实是我记错了，现在重新理），标准奥运五环的覆盖关系是：
蓝 - 黄 - 黑 - 绿 - 红
但这样也不对，因为黄要插进蓝黑之间。实际上，真正的层叠是：
上排三环比下排两个环整体高？不，那样就没穿插了。
正确的做法是这样的：
- 蓝环：z-index: 1
- 黄环：z-index: 2（这样黄在蓝上面，看起来是黄压蓝）
- 黑环：z-index: 3（这样黑在黄上面，看起来是黑压黄）
- 绿环：z-index: 2（这样绿在黑下面，但在红上面？不对）
- 红环：z-index: 1（这样红在绿下面？）
我TM也绕晕了。咱们换个思路，你想要的视觉效果是什么？
- 蓝环和黄环相交处，黄在上（看起来黄穿过蓝）
- 黄环和黑环相交处，黑在上（看起来黑穿过黄）
- 黑环和绿环相交处，绿在上（看起来绿穿过黑）
- 绿环和红环相交处，红在上（看起来红穿过绿）
这逻辑是，相邻两个环，右边的那个在相交处应该在上（针对上排从左到右，下排从左到右）。
但是等等，这样黄环作为一个整体，它既要被蓝环压住（在左边），又要压住蓝环（在右边）？这不可能。我知道了，我之前理解错了五环的穿插方式。
实际上，五环的穿插是：
- 黄环穿过蓝环（黄在上）
- 黑环穿过黄环（黑在上）
- 绿环穿过黑环（绿在上）
- 红环穿过绿环（红在上）
但是这样的话，如果黄全在黑下面，那黄怎么穿过蓝？因为黄在蓝上面啊。哦！我明白了，我之前搞反了。应该是：
要让黄穿过蓝，那么黄必须在蓝的上面，这样黄的下圆弧看起来是从蓝的后面穿出来的？不对，如果黄在蓝的上面，那黄是完全盖住蓝的交集部分的，看起来是黄压在蓝上，不是穿过。
等等，我傻了。如果A穿过B，意味着A在B的上层，这样A的一部分盖住B，看起来像A在B前面。但五环的视觉效果是"编织感"，也就是看起来像是黄环从蓝环的后面穿到前面，或者前面穿到后面。
查一下真实逻辑：在蓝黄相交处，黄环是在蓝环上面的（看起来像黄压住蓝），在黄黑相交处，黑环是在黄环上面的。所以黄的左半部分在蓝上面，右半部分在黑下面。这不就意味着黄环要同时处于两个层叠位置吗？这是不可能的。
所以唯一的解释是：奥运五环并不是简单的五个圆形div绝对定位就能完美实现的。你必须切分环！
等等，不对，我突然悟了。你看看下排的两个环，它们的位置是错开的。黄环主要是和蓝环、黑环相交。在黄蓝交界处，黄在上；在黄黑交界处，黑在上。这意味着黄环整体必须在蓝环上面，但在黑环下面。
所以z-index应该是：
black: 3
yellow: 2
blue: 1
这样黑在黄上，黄在蓝上，完美。
然后看绿环，绿和黄没有直接相交（错开了），绿主要是和黑、红相交。在绿黑交界处，绿在上（绿穿过黑）；在绿红交界处，红在上（红穿过绿）。
所以：
red: 3
green: 2
black: ?
但是黑刚才设了3，现在如果red也3，green要穿过black但black又要穿过yellow，而且green要在red下面… 我们整理一下：
想要的效果：
- 黄压蓝（yellow > blue）
- 黑压黄（black > yellow）
- 绿压黑（green > black）
- 红压绿（red > green）
那这样就是：red > green > black > yellow > blue
五个层级，1到5。这样的话红最高，蓝最低。
咱们验证一下：
- 黄(2)和蓝(1)：2>1，黄压蓝 ✓
- 黑(3)和黄(2)：3>2，黑压黄 ✓
- 绿(4)和黑(3)：4>3，绿压黑 ✓
- 红(5)和绿(4)：5>4，红压绿 ✓
完美！但是等等，绿和黄呢？它们不相交，没关系。黄和红呢？也不相交。蓝和黑呢？它们并列，不相交。
所以实际的z-index配置应该是：
.blue { border-color: #0085C7; left: 0; top: 0; z-index: 1; }
.yellow { border-color: #F4C300; left: 55px; top: 55px; z-index: 2; }
.black { border-color: #000000; left: 110px; top: 0; z-index: 3; }
.green { border-color: #009F3D; left: 165px; top: 55px; z-index: 4; }
.red { border-color: #DF0024; left: 220px; top: 0; z-index: 5; }
搞定！你看，根本不需要啥高级技巧，就是数字游戏。但是你知道吗，很多人在这里卡住，是因为他们想不明白"为什么蓝的z-index最小却在最左边显示"，他们以为z-index是左右顺序。兄弟，z-index是垂直于屏幕的距离，不是水平位置。
还有人会问，那为什么不用flex的order？order是改变DOM顺序的，改变的是渲染流，不是层叠。层叠还得看z-index。
颜色这玩意儿，真别瞎配
我知道你们这群懒鬼，蓝色就写blue，红色就写red。打住！那是CSS关键字，颜色很丑的。奥运五环有标准色值的，咱们虽然不严格按奥运会徽标准来，但至少也得像个样子。
官方大概长这样：
- 蓝：#0085C7（有的是#0081C8，差不多）
- 黄：#F4C300（黄金那味儿）
- 黑：#000000（纯黑，没商量）
- 绿：#009F3D（草绿）
- 红：#DF0024（正红，不是firebrick那种砖红）
你把这些颜色往border-color里一塞，啧，立马就有内味儿了。
还有尺寸，我给你说个我试出来的看着舒服的比例：
环直径100px，border-width 10px，上排三个环中心距110px（就是left值0, 110, 220），下排两个环中心距也是110px（55, 165），但是整体往下偏移55px。
为什么是55px？因为110的一半是55，刚好是半个环的间距，这样下排环的中心对着上排两个环中间的缝隙，完美交错。
/* 完整版CSS，直接抄 */
.rings-container {
position: relative;
width: 320px; /* 220 + 100，最后一个环的left+宽度 */
height: 155px; /* 100 + 55，高度+下排偏移 */
}
.ring {
width: 100px;
height: 100px;
border: 10px solid;
border-radius: 50%;
position: absolute;
/* 加个阴影更有立体感，可选 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.blue {
border-color: #0085C7;
left: 0;
top: 0;
z-index: 1;
}
.yellow {
border-color: #F4C300;
left: 55px;
top: 55px;
z-index: 2;
}
.black {
border-color: #000000;
left: 110px;
top: 0;
z-index: 3;
}
.green {
border-color: #009F3D;
left: 165px;
top: 55px;
z-index: 4;
}
.red {
border-color: #DF0024;
left: 220px;
top: 0;
z-index: 5;
}
你看我这个width设320px怎么算的？最后一个红环left是220，它自身宽100，220+100=320，刚好包得住。高度155也是，下排top是55，环高100，55+100=155。强迫症福音，多一像素我都难受。
兼容性这些坑，踩过才懂
我跟你说，这玩意儿在Chrome最新版看着好好的，换到某些老安卓机或者Safari老版本，能给你整出幺蛾子。
第一个坑，z-index失效。不是说CSS失效，而是有些浏览器（特别是某些国产浏览器的兼容模式），当父元素没有明确设置position: relative/absolute/fixed时，子元素的z-index可能按z-index: auto处理，也就是按DOM顺序堆叠。咱们代码里.container设了relative，所以一般来说没事，但要是你忘了设，或者设成static了，那完蛋，五个环变成五个饼叠罗汉。
第二个坑，border-radius在某些老版安卓WebView上会有锯齿，特别是环比较小的时候。解决办法？加个transform: translateZ(0)或者translate3d(0,0,0)强行开启硬件加速，锯齿就没了。不过咱们今天说了不用transform，那就忍着吧，反正现在2026年了，也没多少那么老的机子了。
第三个坑，box-sizing！我再强调一遍！如果你不加box-sizing: border-box，然后你算坐标left: 220，实际这个环的左边框外边缘在220，但是内容区（国界内）在220+10=230。然后你越算越乱，特别是你要精确控制两个环的重叠区域时，你会疯的。
还有移动端，一定要加viewport那个meta标签，不然缩放之后你的环可能变成椭圆，因为你的容器宽度是固定的px，但屏幕被缩放了。当然你也可以把px换成rem或者vw，那样更响应式，但那就把简单问题复杂化了。咱们今天就固定像素，清清楚楚。
说到这我突然想起来，有些同学可能会试图用outline来代替border画环，因为outline不占据空间，算坐标简单。兄弟，outline没法做圆环！outline-radius的支持度感人，而且outline会紧贴border外缘，你要做圆环还得再套个圆，麻烦死了。乖乖用border。
调试的小骚操作，教给你
调这种重叠图形，最怕的就是你看着不对，但不知道谁盖着谁。特别是五个环挤在一起，颜色又多，眼睛都看花了。
我的祖传秘方：先把所有环设成半透明！
.ring {
opacity: 0.6; /* 或者0.7 */
}
这样你能一眼看出重叠区域是什么颜色，谁在上谁在下。比如蓝和黄重叠，如果上面是黄的，你会看到黄绿色（因为蓝色透过来了）；如果蓝在上，你会看到黄绿色（黄色透过来了）……好像没啥区别。哦对，忘了这俩叠加颜色差不多。反正你就看边界，能看到下层边框凸出来，那就是上层没盖住。
更好的办法是给每个环加个临时的背景色：
.blue { background-color: rgba(0, 133, 199, 0.1); }
.yellow { background-color: rgba(244, 195, 0, 0.1); }
/* ... 以此类推 */
这样每个环的本体区域（那个100x100的div区域，虽然视觉上是个环，但方形的盒子模型还在）会有淡淡的背景色，你能看到边界在哪，调位置的时候心里更有数。调完记得删掉或者注释掉。
还有就是开开发者工具，一层一层点DOM树，看那个高亮的蓝框在哪，能帮你理解层叠关系。
另外，我建议你用CSS变量管理颜色和尺寸，这样改起来快：
:root {
--ring-size: 100px;
--ring-border: 10px;
--blue-color: #0085C7;
--spacing: 110px;
--offset: 55px;
}
.ring {
width: var(--ring-size);
height: var(--ring-size);
border: var(--ring-border) solid;
border-radius: 50%;
position: absolute;
}
.blue {
border-color: var(--blue-color);
left: 0;
top: 0;
z-index: 1;
}
/* ... 其他类似 */
这样一来，你想试试80px的小环，改一个变量就行；想试试彩虹配色，改颜色变量就行。效率提升200%。
那个经典的翻车现场
我敢打赌，80%的人第一次搞这个，都会犯一个错：他们发现无论怎么调z-index，环就是"穿"不过去，看起来就是五个饼子叠在一起，没有那种编织的错觉。
为啥？因为你可能把五个环都设成了z-index: auto（默认），然后以为改DOM顺序就行。或者你设了z-index，但是父容器没position，或者你给了z-index: 999但浏览器还是不认。
还有一种翻车是，有人非要实现"真正的穿插"，就是想让黄环的左边在蓝上面，右边在黑下面，然后试图给黄环劈成两半，左半部分z-index: 2，右半部分z-index: 4……兄弟，那就是两个div了，就不是一个环了。视觉上会有裂缝的，别这么干。
记住我们前面说的，奥运五环的视觉效果是分层实现的，并不是真的在一个环上实现了不同区域的层叠。黄环整体在黑环下面（如果按咱们前面的层叠逻辑），或者上面，反正是一个整体，只是位置错开让你觉得它穿过去了。
还有个翻车点：有些人把下排两个环的top值算错了。比如设成50px，然后发现上排下排的环重叠太多了，或者重叠太少了没有穿插感。这就得慢慢调那个55px，或者看你容器大小。建议调的时候用开发者工具直接改数值，按住上下箭头微调，看着舒服了再写到代码里。
最后一种翻车，属于高级一点的：他们意识到需要层叠，但给z-index设了1,2,3,4,5之后，发现颜色不对了，因为半透明叠加了。这时候你才想起来，哦对，我把opacity调低了在调试。赶紧改回1，或者干脆删掉opacity。
面试这玩意儿真的会考
别笑，我真见过有公司笔试题考这个。而且不是小公司，就那种看起来挺正经的互联网公司。他们考这个不是为了让你背代码，是为了看你懂不懂：
-
层叠上下文（Stacking Context）的概念——你知道为啥要给父容器position: relative吗？如果不给，子元素的绝对定位相对于谁？body？还是html？
-
z-index的计算——不同层级之间的关系，DOM顺序和z-index优先级的区别
-
border-radius画圆的原理——50%是怎么算的，基于宽高的最小值对吧
-
box-sizing的盒子模型——border-box和content-box的区别，这题里为啥必须用border-box
-
定位系统——absolute vs relative，脱离文档流的影响
所以你练一遍这个，比你看十遍MDN的文档都管用。而且这题能在短时间内看出一个人的CSS底子厚不厚。那种上来就"我要用canvas画"的，或者"我要引入一个SVG图标库"的，基本就直接pass了。不是说不行，是太绕了，没有直击问题的本质。
还有面试官会问：“如果不用绝对定位，能不能实现？” 这时候你可以思考一下，用grid布局其实也能做，就是定义好网格，然后让环跨单元格，但z-index控制还是得走那一套。或者你用float？别逗了，float更麻烦。
最骚的是有人问：“如果我要做动画，让五环一个一个转出来怎么办？” 那你就可以上@keyframes了，给每个环加transform: rotate(0deg)到rotate(360deg)，但是等等，咱们一开始说了不用transform，真要做动画那还是得用，或者你用border-color动画也行，反正面试官就是想看你有没有举一反三的能力。
最后的碎碎念
写到这儿我突然想起，其实还有一种更变态的实现方法，用::before和::after伪元素，把每个环切成三段，然后分别控制z-index，实现真正的"穿插"效果，就是黄环的左弧在上、中弧在下、右弧在上这种。但那代码量能再乘以三，没必要，真没必要。咱们这是奥运五环，不是奥运十环。
还有就是响应式的问题。我这个代码里全是px，在小屏幕上可能会显得太大。你可以改成vmin单位，比如width: 20vmin，这样在不同屏幕上都按比例缩放。但那就牵扯到计算的复杂性了，因为vmin是视口最小边的百分比，你再算那个55px的偏移就得用calc。不过原理是一样的。
再有就是，有人可能会纠结，为什么我的五环看起来有点"胖"或者"瘦"。那是你的border-width和ring-size比例不对。一般来说，border-width是ring-size的1/10到1/8看着比较协调。比如100px的环，10px-12px的边框。太细了像铁丝，太粗了像甜甜圈。
哦对了，还有个冷知识：奥运五环的官方设计里，五个环的粗细是一样的，交织的方式也是有严格规定的，但在网页上咱们稍微自由点，只要看起来像那么回事就行。毕竟你又不是给奥委会做官网，对吧。
完整的代码我再贴一遍， clean version，拿去直接跑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS奥运五环</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.olympic-rings {
position: relative;
width: 320px;
height: 155px;
/* 调试时取消下面这行的注释，看容器边界 */
/* outline: 1px dashed red; */
}
.ring {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid;
/* 过渡动画，鼠标放上去有反馈，显得高级 */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 鼠标悬停效果，可选，显得你考虑交互 */
.ring:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 10 !important; /* 悬停时强行置顶，注意要加!important覆盖原z-index */
}
.blue {
border-color: #0085C7;
left: 0;
top: 0;
z-index: 1;
}
.yellow {
border-color: #F4C300;
left: 55px;
top: 55px;
z-index: 2;
}
.black {
border-color: #000000;
left: 110px;
top: 0;
z-index: 3;
}
.green {
border-color: #009F3D;
left: 165px;
top: 55px;
z-index: 4;
}
.red {
border-color: #DF0024;
left: 220px;
top: 0;
z-index: 5;
}
</style>
</head>
<body>
<div class="olympic-rings">
<div class="ring blue"></div>
<div class="ring yellow"></div>
<div class="ring black"></div>
<div class="ring green"></div>
<div class="ring red"></div>
</div>
<script>
// 虽然这题纯CSS就能搞定，但加个console.log表示我很专业
console.log('奥运五环加载完成！z-index层级：蓝1 < 黄2 < 黑3 < 绿4 < 红5');
</script>
</body>
</html>
看到没，我还给你加了个hover效果，鼠标放上去环会变大并且强行z-index置顶，这交互多细腻。虽然没啥用，但显得你很细心。
行了，就写到这吧。这个题你拿回去练，练熟了不仅能装……啊不是，不仅能提升技术，下次遇到类似的层叠问题，你第一反应就知道是z-index和定位的问题，而不是瞎调CSS或者引入什么奇怪的库。
记住，前端这东西，越基础的东西越能整出花活儿。别整天想着搞什么框架工程化，偶尔回来画几个div，也挺快乐的。至少比调Flexbox的align-items快乐，那个才是真的折磨。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
