0

I'm trying to absolutely position a child div element relative to the bottom limit of its parent div so that the it would be maintained at the bottom and will continue to assume the width of its parent even if its parent get re-sized dynamically. The problem is that if I set the parent div position to relative using css from head of document it doesn't seem to accept the positioning made and the child div gets positioned to the body instead breaking the layout.

You can check my code here 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 回答