CSS позиция: относительная против позиции: абсолютная - PullRequest
Новая
       25

CSS позиция: относительная против позиции: абсолютная

1 голос
/ 25 февраля 2011

Я пытаюсь выяснить, как очистить или сбросить относительное расположение элемента на моей странице. У меня есть элемент с позицией: относительный, и немного дальше вниз по дереву определяется диалоговое окно div вместе с фоновым изображением, которое растягивается, чтобы заполнить страницу, чтобы сделать диалоговое окно модальным. Проблема в том, что у б / у есть позиция: относительно дальше вверх по дереву DOM, когда я говорю top: 0, left: 0 для фонового изображения, он идет к 0,0 относительно этого элемента, а не к 0, 0 страницы. Как я могу очистить или сбросить относительное позиционирование, чтобы абсолютно позиционированное фоновое изображение можно было установить на 0,0 страницы?

Ответы [ 3 ]

3 голосов
/ 25 февраля 2011

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

Если у модала есть предок с относительным или абсолютным позиционированием, вы не можете «отменить» это изменение стиля элемента, нарушающего работу.

HTML: 

<html>
    <head>...</head>
    <body>
        <div id="content">content!</div>
        <div id="someModal" class="modal" style="display:none"></div>
    </body>
</html>

CSS: 

.modal {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
0 голосов
/ 25 февраля 2011

Ну, абсолютно позиционированный элемент, который установлен в (0,0), ВСЕГДА попадет в угол (0,0) своего ближайшего родительского элемента, который является относительным положением.Это определенное поведение, и его нельзя изменить.

Поскольку вы абсолютно позиционируете модал, я бы предложил вытащить его из относительно позиционированного элемента и просто прикрепить его под (а) непозиционируемого родителяили (b) сразу после тега body.

РЕДАКТИРОВАТЬ: Джонатан победил меня в этом!

0 голосов
/ 25 февраля 2011

Мы хотели бы сначала увидеть ваш код, но, вероятно, вы ищете это: 

position: absolute !important;
...