CSS: абсолютное позиционирование в разных браузерах

#css #position #absolute

#css #позиция #абсолютное

Вопрос:

Почему это приводит к разным позициям в разных браузерах?

 {
    position: absolute;
    left:332px;
    top: 210px;
    width: 293px;
    height: 215px;
    border: 1px solid #000000;
    background-color: #143f72;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
}

В IE оно смещено влево примерно на 100 пикселей по сравнению с Firefox, а в Chrome — на 100 пикселей вправо относительно FF … Почему?

Редактировать: html-это просто <div id="container"><div id="the_css_above_div"></div></div>

#container имеет следующий css:

 #container{
    float:left;
    width: 632px;
}

Спасибо!

1. нужен HTML-код, чтобы разобраться в этом.

2. Только что проверил это в IE8, FF и Chrome. Кажется, ни на одном из них нет никакой разницы. Проверьте jsfiddle.net/EQn2E . Нужно было бы просмотреть другой код, чтобы понять, есть ли проблема.

3. html — это просто <идентификатор div=»that_css_id»></div>

4. Если вы действительно хотите разобраться в этом, создайте полный тестовый пример, используя jsFiddle или JS Bin . Или предоставьте прямую ссылку на свою страницу.

5. Добавление position: relative в контейнер может устранить проблемы, с которыми вы сталкиваетесь, но это всего лишь предположение. Рекомендуем предоставить ссылку на тестовую страницу, как предлагали @thirtydot и @anothershrubery. 🙂

Ответ №1:

Заставил это работать… Родительский div должен иметь position:relative в своем объявлении CSS. Если кто-нибудь столкнется с этой проблемой, проверьте свой родительский div 🙂

1. Или предоставить людям, пытающимся помочь, больше информации?

2. Я полагаю, что это верно не только для IE … блоки позиционируются абсолютно по отношению к родительскому элементу, для атрибута position которого установлено значение relative или absolute, или по отношению к окну, если ни у одного родительского элемента не определена позиция…

3. я как раз собирался опубликовать кое-что об этой …. проблеме, с которой я столкнулся, и как только я увидел ваше «получилось», я подумал, ЧЕРТ возьми, я ЗНАЮ ЭТО !!!! лол …… спасибо. 1

4. Спасибо, luqita. Я бы никогда не разобрался в этом без вашего поста. 1

Ответ №2:

Ваш родительский div должен иметь position:relative; . В противном случае ваша position:absolute; позиция будет отображаться на всей странице. Если родительский div имеет относительное позиционирование, абсолютный div позиционирует себя на основе своего родителя.