前言
我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 本題目源自于牛客網 微信公衆号前端小歌謠
題目
相對定位的元素仍然會待在原來的地方，即不會從流中出來。此後可以通過"top"、"right"、"bottom"和"left"屬性使元素相對于初始位置進行移動。現在給類名為"center"的盒子設定相對定位屬性"position: relative"、設定"left: 50px"、設定"top: 50px"，再自定義背景顔色以便于觀察。此時可以觀察到中間盒子在原始的位置上向右、向下均移動了50px的距離，并且保留了原來的空間。
完成以上所講的步驟即可通過測試，進入下一節的學習吧。
編輯
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative</title>
</head>
<style type="text/css">margin: 0;
padding: 0;
}
.left {
width: 100px;
height: 100px;
background-color: black;
}
.center {
width: 100px;
height: 100px;
position: relative;
background-color: red;
left: 50px;
top: 50px;
}
.right {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>