html - 定位 HTML 元素，使最大的祖先表现出 block 元素风格

Question

在我的 HTML5/javascript 应用程序中，我在多层 Canvas 上绘制了一个模拟时钟(多层的原因是由于 javascript 渲染动画而进行了优化)。在时钟下方，我想用数字显示时间。这是想要实现的目标:

这是我的收获

这是它的标记:

<div id="container">
    <div id="analog">
        <canvas id="canvBackground"></canvas>
        <canvas id="canvDigitsHours"></canvas>
        <canvas id="canvDigitsMinutes"></canvas>
        <canvas id="canvHandsMinutes"></canvas>
        <canvas id="canvHandsHours"></canvas>
    </div>
    <div id="digital">
        16:30
    </div>
</div>



#container {
}
#analog {
    position: relative;
    display: block;
}
#analog > canvas {
    position: absolute;
}
#digital {
    display: block;
}

如何创建我的父元素，<div id="analog"> , 当它有位置为绝对的 child 时表现出 block 元素风格？

编辑 1:尝试@CBroe 的提议(如果我没有误解你的话？)。使用 padding -top: 250px; #analog一个#digital向下移动 250 像素:

Answer 1

您只需为两个子元素指定相对 位置即可使其正确显示。

希望这对您有所帮助!

#container {
  margin: 40px;
}

#canvCenterExample {
  background: red;
  width: 5px;
  height: 5px;
  border-radius: 100px;
  left: 100px;
  height: 100px;
}

#canvBackground {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background: #BFB4FD;
}

#analog {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
}

#analog>canvas {
  position: absolute;
}

#digital {
  position: relative;
  display: block;
  width: 200px;
  text-align: center;
  padding-top: 20px;
}

<div id="container">
  <div id="analog">
    <canvas id="canvBackground"></canvas>
    <canvas id="canvCenterExample"></canvas>
  </div>
  <div id="digital">16:30</div>
</div>