《HTML里的瓦学弟和他的妈妈》
原创
《HTML里的瓦学弟和他的妈妈》
原创
🎮 背景介绍
在《无畏契约》的战场上，有个特别的男生，圈里称他为“瓦学弟”。他平时嘴硬刚猛，满嘴“我来前压”，但只要听见女玩家声音，他立马秒变乖宝宝：
“妈妈，我听你的！”
“妈妈，你说去哪儿我去哪儿！”
“妈妈，我不送了！”
这神奇转变，就像 HTML 里的 position: absolute;（瓦学弟） 遇到了 position: relative;（妈妈，女玩家） 一样。
🏠 角色设定
角色 | CSS身份 | 现实中角色 | 性格特征 |
|---|---|---|---|
瓦学弟 | position:absolute | 玩无畏契约游戏的男生 | 跑得快、乱跑、没人管，见妈妈秒变乖 |
妈妈 | position:relative | 游戏里的女玩家 | 不动声色，给儿子定位参考，掌控全局 |
🧎♂️ 瓦学弟的“自由狂奔”
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>瓦学弟自由飞</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: #f5f5f5;
}
.瓦学弟 {
position: absolute;
background-color: lightblue;
color: #333;
font-weight: bold;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
border-radius: 10px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
transition: top 0.5s ease, left 0.5s ease;
}
button {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
font-size: 16px;
z-index: 10;
}
</style>
</head>
<body>
<button onclick="flyXueDi()">让瓦学弟飞！</button>
<div class="瓦学弟" id="xuedi">瓦学弟</div>
<script>
const xuedi = document.getElementById('xuedi');
function flyXueDi() {
const maxLeft = window.innerWidth - xuedi.offsetWidth;
const maxTop = window.innerHeight - xuedi.offsetHeight;
const newLeft = Math.floor(Math.random() * maxLeft);
const newTop = Math.floor(Math.random() * maxTop);
xuedi.style.left = newLeft + 'px';
xuedi.style.top = newTop + 'px';
}
// 初始随机位置
window.onload = flyXueDi;
</script>
</body>
</html>效果：
点击“让瓦学弟飞”，没有妈妈（relative）在，瓦学弟就会跑来跑去，只定位于html，并且不受限制。
说明：这里点击按钮后，是控制瓦学弟的top和left，结果放飞自我
👩🦰 妈妈（女玩家）上线，瓦学弟立刻听话，妈妈去哪自己绝对跟随
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>瓦学弟听妈妈话</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: #fefefe;
padding: 50px;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
margin-bottom: 40px;
}
.妈妈 {
position: relative;
top: 0;
left: 0;
width: 300px;
height: 300px;
margin: 0 auto;
border-radius: 16px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 3px solid hotpink;
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.5);
transition: top 0.5s, left 0.5s;
}
.瓦学弟 {
position: absolute;
top: 10px;
left: 20px;
background: rgba(173, 216, 230, 0.9);
width: 150px;
height: 80px;
line-height: 80px;
text-align: center;
font-weight: bold;
color: #333;
border-radius: 10px;
border: 2px solid #4aa;
transition: top 0.5s, left 0.5s;
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
backdrop-filter: blur(2px);
}
</style>
</head>
<body>
<h1>💘 妈妈飞一飞，瓦学弟跟着飞</h1>
<button onclick="moveMom()">👣 妈妈飞！</button>
<div class="妈妈" id="mom">
<div class="瓦学弟">“妈妈带我飞！”</div>
</div>
<script>
function moveMom() {
const mom = document.getElementById('mom');
const top = Math.floor(Math.random() * 500);
const left = Math.floor(Math.random() * 500);
mom.style.top = top + 'px';
mom.style.left = left + 'px';
}
</script>
</body>
</html>效果：
🏃 妈妈飞到哪，瓦学弟就飞到哪
说明：这里控制的是妈妈的top和left，控制妈妈飞，粉色框的内容就是妈妈
📝 总结
角色 | CSS写法 | 作用说明 |
|---|---|---|
妈妈 | position: relative | 不动声色，定义坐标原点，给瓦学弟定位参考 |
瓦学弟 | position: absolute | 乱跑狂飙的儿子，遇妈妈乖乖蹲位，不离不弃 |
妈妈飞 | 改变 relative 元素的 top 和 left | 妈妈飞了，儿子跟着飞，但儿子绝对跟随妈妈的位置 |
哈哈！动手操作一下，是不是对相对定位和绝对定位有了一定的认知，准确的说，relative应该叫“相对自己定位”，自己位置不变，自己的灵魂出去转悠，而absolute应该叫“绝对跟随定位”，一直跟随着relative的灵魂。好了，这就是玩学弟与妈妈的故事，是不是觉得很有趣呢！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
