定位HTML-elements，让最高级行为block-element-style

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"> 在具有位置为绝对位置的子元素时表现 block-element-style？

编辑 1：尝试@CBroe 的提议（如果我没有误解你的话？）。使用 padding -top: 250px; #analog 和 #digital 都向下移动了 250px：

Answer 1

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

希望对您有所帮助！

#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>

定位HTML-elements，让最高级行为block-element-style

Positioning HTML-elements, make the utmost ancestor behave block-element-style

html

css

css-position

absolute