10 绝对定位和相对定位

• absolute 和 relative 分别依据什么定位？

查看代码

html

<p>absolute 和 relative 定位问题</p>
<div class="relative" id="relativeDiv">
  <div class="absolute" id="absoluteDiv">this is absolute</div>
</div>

<div class="button-container">
  <button id="reset">Reset</button>
  <span>恢复 .relative 和 .absolute 元素的默认样式</span>
  <br />
  <button id="button1">button1</button>
  <span>为 .relative 元素添加 position: relative; top: 20px; left: 50px; 属性</span>
  <br />
  <button id="button2">button2</button>
  <span>为 .absolute 元素添加 position: absolute; top: 20px; left: 50px; 属性</span>
  <br />
</div>

css

body {
  margin: 20px;
  font-family: Arial, sans-serif;
}
.relative {
  width: 400px;
  height: 200px;
  border: 2px solid #ccc;
  margin-bottom: 20px;
}
.absolute {
  width: 200px;
  height: 100px;
  border: 2px solid blue;
}
.button-container {
  margin-top: 20px;
}
.button-container button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
.button-container button:hover {
  background-color: #0056b3;
}

js

document.getElementById('button1').addEventListener('click', function () {
  document.getElementById('relativeDiv').style.position = 'relative'
  document.getElementById('relativeDiv').style.top = '20px'
  document.getElementById('relativeDiv').style.left = '50px'
})

document.getElementById('button2').addEventListener('click', function () {
  document.getElementById('absoluteDiv').style.position = 'absolute'
  document.getElementById('absoluteDiv').style.top = '20px'
  document.getElementById('absoluteDiv').style.left = '50px'
})

document.getElementById('reset').addEventListener('click', function () {
  document.getElementById('relativeDiv').style.top = ''
  document.getElementById('relativeDiv').style.left = ''
  document.getElementById('absoluteDiv').style.top = ''
  document.getElementById('absoluteDiv').style.left = ''
  document.getElementById('relativeDiv').style.position = ''
  document.getElementById('absoluteDiv').style.position = ''
})

---

• relative 依据自身定位
• absolute 依据最近一层的定位元素定位：
  • 最近一层的定位元素 relative、absolute、fixed 中的任意一个
  • 如果没有，则依据 html/body 元素定位