父级内部不能包含绝对定位的div

Question

我试图绝对定位一个子div元素相对于其父div的下限，这样它就会保持在底部并继续假定其父级的宽度，即使它的父级得到了大小动态。问题是如果我使用来自文档头部的css将父div位置设置为relative，它似乎不接受所做的定位，并且子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。