Абсолютная позиция не работает - PullRequest
Новая
       5

Абсолютная позиция не работает

11 голосов
/ 30 сентября 2010

Я пытаюсь поместить div с идентификатором 'absPos' в абсолютную позицию относительно его родительского div. Но это не работает, div находится в верхнем левом углу страницы.

Мой пример кода выглядит следующим образом 

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

Можете ли вы помочь мне решить эту проблему. В моем случае вместо красного цвета фона я должен поместить фоновое изображение.

Привет

Ответы [ 6 ]

36 голосов
/ 30 сентября 2010

Элементы с абсолютным позиционированием позиционируются из их offsetParent, ближайший предок, который , также позиционируется . В вашем коде ни один из предков не является «позиционированным» элементом, поэтому div смещен относительно элемента body, то есть offsetParent.

Решение состоит в том, чтобы применить position:relative к родительскому div, который заставляет его становиться позиционируемым элементом, а дочерний offsetParent. 

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px; position: relative;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>
6 голосов
/ 30 сентября 2010

Если вы размещаете элемент с абсолютной позицией, вам нужно, чтобы базовый элемент имел значение позиции, отличное от значения по умолчанию.

В вашем случае, если вы измените значение позиции родительского div на 'родственник "вы можете решить эту проблему.

3 голосов
/ 30 сентября 2010

Вам необходимо объявить родительский div либо position: relative, либо position: absolute.

relative - это то, что вы ищете в этом случае.

2 голосов
/ 30 сентября 2010

Сначала нужно указать родительский div relative: 

<div style="height: 80px; padding-left: 20px; position:relative;">
1 голос
/ 01 октября 2010

Вы также можете применить Положение: абсолютное значение для родительского Div. Общий код ниже 

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px;position:absolute; padding-left: 20px;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>
0 голосов
/ 09 июля 2015

Если, как и я, вы пытаетесь расположить элемент над другим элементом, плавающий элемент должен быть внутри другого, а не как элементы одного уровня. Теперь ваш position:absolute; может работать!

...