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

在我的HTML5/javascript应用程序中，我在多层画布上绘制了一个模拟时钟（多层原因是由于JavaScript呈现的动画优化）。在时钟下方，我想用数字显示时间。这是想实现什么：定位HTML元素，使最大的祖先表现出块元素风格

这是我已经实现

下面是它的标记：

<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">，当它具有位置为absolute的孩子时表现为块元素样式：绝对？

编辑1：尝试@ CBroe的建议（如果我不想误解你的话？）。使用padding -top: 250px;两个#analog的#digital移动250像素下来：

来源

2017-10-14 Hauns TM

你不能，绝对定位元素取出正常布局流。但是因为我假设你知道你的canvas的高度（无论是绝对的像素，还是至少在高宽比方面），你可以简单地给容器元素一个相应的填充顶部。 – CBroe

Thnx @Croro但是没有产生预期的结果。 :-( –

然后请创建一个[mcve]，以便我们可以检查。 – CBroe

你只需要指定子元素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>

来源

2017-10-14 19:25:52 Mark

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

回答

相关问题