Кошмар абсолютного позиционирования CSS - различия браузеров

Question

У меня есть код, который позволит мне всплыть на пару div с HTML.

Я получил идеальный пиксель в Firefox, а затем понял, что все остальные браузеры (не протестированные в IE) отключены.

Может ли кто-нибудь сказать мне или показать мне статью о том, как разные браузеры обрабатывают элементы с абсолютным позиционированием и как исправить мою дилемму?

Вот мой оригинальный код , а вот мой новый код .

Вот что я вижу:

Answer 1

Хорошо выглядит в IE9, Chrome 17 и FF9. добавление позиции относительно div # userControls обеспечит позиционирование абсолютных узлов относительно его родительского узла.

Answer 2

Я понял, что я делал неправильно.Я создал div вокруг тега p и затем установил ширину в соответствии с тем, что хотел, потому что до того, как он вычислил пространство с использованием отступов вокруг p, вот мой обновленный код, который отлично работает!(Надеюсь)

Обновленный код: ДЕМО

---

Редактировать: У меня есть скрыто боксы вне каждого из видимых боксов (где вы нажимаете, чтобы показать скрытые), поэтому, когда я пытался расположить их, было нелегко определить, где они будут находиться в DOM, но если вы сделаете скрытые блокируют дочерние элементы видимых полей соответственно, тогда вы можете использовать свойство position: relative; CSS, чтобы расположить дочерние блоки точно там, где вы хотите их!

CSS

.visibleBox{
     position: relative;
}

.hiddenBox{
     position: absolute;
     bottom: 0; 
     right:0;
}

HTML

<div class="visibleBox">
    <p class="hiddenBox">I am hidden sometimes<p>
</div>

Итак, я пытаюсь сказать, что у меня есть P вне DIV ииз-за этого было совершенно неловко правильно размещать его во всех браузерах, но использование родителя и потомка с относительной и абсолютной позицией устранило мою проблему.

Answer 3

Во всех браузерах абсолютное позиционирование определяется одинаково.

Элементы позиционируются абсолютно относительно относительного / абсолютного родительского элемента или элемента body, если это не так.