Question

这是我的代码，当我尝试设置位置fix.i最终拧紧其他元素。这是音频播放器的自定义css的一部分。我想将它停靠到底部就像spotify音频播放器。所以尝试制作位置 .audioplayer 作为修复，但最终搞砸了音频播放器的其他部分。我试图在自定义div 中包含它并应用位置：已修复但未成功 :(

这是小提琴链接https://jsfiddle.net/m89L5g36/4/

.audioplayer{
    height: 2.5em; /* 40 */
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid #222;
    position: relative;
    z-index: 1;
    background: #333;
}

    /* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

    .audioplayer > div
    {
        position: absolute;
    }


    /* play/pause button */

    .audioplayer-playpause
    {
        width: 2.5em; /* 40 */
        height: 100%;
        text-align: left;
        text-indent: -9999px;
        cursor: pointer;
        z-index: 2;
        top: 0;
        left: 0;
    }
.audioplayer-playing .audioplayer-playpause a:after
            {
                right: 0;
            }

Answer 1

这是你想要实现的目标吗？

https://jsfiddle.net/m89L5g36/34/

似乎doctype声明和js文件有一些语法错误导致！}显示在输出上，js部分不应该有脚本标记，我删除它们并且我注释掉了最后一个函数在js文件中，不知道它在那里。

在html中，我在音频周围包裹了一个div

<div class="fixed">
    <audio src="http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" preload="none" controls loop></audio>
</div>

使用css我删除了正文样式并将其添加到div中，如下所示，位置已固定。

.fixed{
  position:fixed;
  bottom:0;
  left:0;

  width:100%;
  padding:10px;
   -webkit-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 ); /* 300 */
    -moz-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, 5 ); /* 300 */
    box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 ); /* 300 */

}

当我使用position：fixed时，Css会中断

1 个答案: