不能在父级中包含绝对定位的 div

Question

我试图绝对定位一个子 div 元素相对于其父 div 的下限，这样它就会保持在底部，并且即使它的父元素重新获得它也会继续假设其父元素的宽度动态调整大小。问题是，如果我使用文档头部的 css 将父 div 位置设置为相对位置，它似乎不接受所做的定位，并且子 div 被定位到主体而不是破坏布局。

你可以在这里查看我的代码Broken div

CSS：

            #player {
            width: 640px;
            height: 360px;
            background-color: #aaa;
            border: 1px solid #555;.
            position: relative;
        }
        #player div.controls {
            width: 100%;
            height: 26px;
            line-height: 26px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 2;
            background-color: #222;
            opacity: 0.5;
        }
        #player span.control {
            padding-left: 10px;
            padding-right: 10px;
            margin-right: 5px;
            cursor: pointer;
        }
        #player span.control:hover {
            background-color: #555;
        }
        #player span.control:first-child {
            margin-left: 5px;
        }

HTML：

        <div id="player">
            <div class="controls">
                <span class="control playpause" title="play/pause"></span>
                <span class="control volume" title="volume"></span>
                <span class="control resize" title="maximize/restore"></span>
            </div>
        </div>

Answer 1

以下语句（第 5 行）中多余的 .（点）是问题所在：

border: 1px solid #555;.

浏览器会忽略它后面的position: relative。