如何将 div 绝对定位到其父级？ [复制]答案

【问题标题】：How do I position div absolute to its parent? [duplicate]如何将 div 绝对定位到其父级？ [复制]
【发布时间】：2019-09-14 20:08:47
【问题描述】：

我尝试将 div 绝对定位到其父级。见图表 1。

我设置了 left 和 top 属性，但 div 仍然定位到根元素，而不是其父元素仪表板。

请问我在这里遗漏了什么？

#nav {
  width: 200px;
  min-height: 500px;
  border: 2px solid gray;
  display: inline-block;
}

#chart1 {
  position: absolute;
  top: 20px;
  left: 100px;
  width: 250px;
  height: 450px;
  border: 1px solid black;
}

#chart2 {
  position: absolute;
  top: 20px;
  left: 450px;
  width: 250px;
  height: 450px;
  border: 1px solid black;
}

<div id="nav"></div>
<div id="dashboard">
  <div id="chart1">Chart 1</div>
  <div id="chart2">Chart 2</div>
</div>

【问题讨论】：

给 Div 父级相对
“请问我在这里遗漏了什么？” - 绝对的基础知识，你可以而且应该在任何 CSS 初学者教程中阅读……甚至只是输入你的问题将标题逐字输入 Google 会立即引导您进行解释，例如 tomelliott.com/html-css/css-position-child-div-parent
已解决。谢谢大家的热心帮助。

标签： html css

【解决方案1】：

你错过了position: relative。父 div 应具有相对位置，子 div 应具有绝对位置

#nav {
  width: 200px;
  min-height: 500px;
  border: 2px solid gray;
  display: inline-block;
}
#dashboard {
  position: relative;
}
#chart1 {
  position: absolute;
  top: 20px;
  left: 100px;
  width: 250px;
  height: 450px;
  border: 1px solid black;
}

#chart2 {
  position: absolute;
  top: 20px;
  left: 450px;
  width: 250px;
  height: 450px;
  border: 1px solid black;
}

<div id="nav"></div>
<div id="dashboard">
  <div id="chart1">Chart 1</div>
  <div id="chart2">Chart 2</div>
</div>

【讨论】：

【解决方案2】：

position: relative 是关键。

#nav {
  width: 200px;
  min-height: 500px;
  border: 2px solid gray;
  display: inline-block;
}
#dashboard {
  position: relative;
}
#chart1 {
  position: absolute;
  top: 20px;
  left: 100px;
  width: 250px;
  height: 450px;
  border: 1px solid black;
}

#chart2 {
  position: absolute;
  top: 20px;
  left: 450px;
  width: 250px;
  height: 450px;
  border: 1px solid black;
}

<div id="nav"></div>
<div id="dashboard">
  <div id="chart1">Chart 1</div>
  <div id="chart2">Chart 2</div>
</div>

【讨论】：