0

子 div 要素を親 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>
4

1 に答える 1

2

The extra . (dot) on the following statement (line 5) is the problem:

border: 1px solid #555;.

The Browser simply ignores the position: relative that follows it.

于 2013-06-03T06:46:17.287 に答える