Html 包含绝对Div的内联相对Div

以下是我的标记：

.play-controls {
        .fa-play, .fa-pause {
            font-size: 25px;
        }
    }

.volume-controls {
    display: inline-block;
    position: relative;

    .overlay {
        background-color: $highlight;
        height: 10px;
        border-radius: 5px;
        width: 0px;
        position: absolute;
        z-index: 15;
    }

    .background {
        background-color: $text-color;
        width: 100px;
        height: 10px;
        border-radius: 5px;
        position: absolute;
        z-index: 10;
    }

    .circle {
        border-radius: 100%;
        position:absolute;
        background-color: #fff;
        border: 1px solid;
        height: 15px;
        width: 15px;
        z-index: 20;
        top: -3px;
    }
}

.player {

    #album-artwork {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        display:inline-block;
        margin-right: 10px;
    }
    .wrapper {
        display:inline-block;
        .information {
            margin-bottom: 5px;

            #song-title {
                font-size: 22px;
                font-weight:bold;
                margin-right: 5px;
            }

            #artist-album {
                font-size: 18px;
            }
        }

        .progress-bar {
            position: relative;

            .overlay {
                background-color: $highlight;
                height: 10px;
                border-radius: 5px;
                width: 0px;
                position: absolute;
                z-index: 15;
            }

            .background {
                background-color: $text-color;
                width: 600px;
                height: 10px;
                border-radius: 5px;
                position: absolute;
                z-index: 10;
            }

            .circle {
                border-radius: 100%;
                position:absolute;
                background-color: #fff;
                border: 1px solid;
                height: 15px;
                width: 15px;
                z-index: 20;
                top: -3px;
            }
        }
    }
}

单干
贝克-盖罗

在

音量控制

中，具有类

背景

、

圆圈

和

叠加

的div都是

位置：绝对音量控制的code>作为
位置：相对

当制作
播放控件
、
音量控件
和
播放器
内联时，
播放控件
与
音量控件
内联，但
音量控件
与播放器重叠

我怎样才能把所有的东西都放在一行，而不重叠

编辑：
您可以
浮动：左3个主要部分或
显示：内联块它们
播放器
在
音量控制上的问题
是因为
音量控制中的绝对定位元素
。您可以在
音量控制中添加宽度

.volume-controls {
    display: inline-block;
    position: relative;
    width:150px;
}

这是一个问题
有没有一种方法可以在不需要浮动的情况下完成你在那里做的事情？我更喜欢不用浮动。@JaredCubilla您可以使用
display:inline block
。但由于定位的元素，需要宽度。它不计算宽度，因为它没有内容。位置发生在新的“层”上，因此
音量控制
没有宽度