Question

我有以下HTML代码：

<body id="mybg">

<div id="countdown-11"></div>
<br>
<audio id="myaudio" src="music/forestsounds.ogg" controls="controls" loop="loop"></audio>
</body>

<div>是一个coundown计时器，我想将音频组件放在倒数计时器下面......在这种情况下，它们是叠加的。

我试过这个CSS代码：

#myaudio{
bottom: 10px;
}

但没有结果。怎么了？

Answer 1

尝试在css中添加以下代码中的audio标签：

position: absolute;

然后使用顶部，左侧等移动它。

Answer 2

使用位置绝对值动态更改div的位置

#myaudio
{
   position:absolute;
   top:10%;
   left:10%;
}

可以根据您希望＆＃34; myaudio＆＃34;的位置更改百分比值。 div去吧

希望这有助于：）

Answer 3

正如我们所讨论的，This Fiddle符合您的要求。

CSS代码：

#countdown-11{
  clear:both;
  background: #444 !important;
  color:#FFF;
  margin:4px;
  padding:4px;
}
#myaudio{
   clear:both;
}

自定义音频标签位置

3 个答案: