css - 不能在父级中包含绝对定位的 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。