Позиция Firefox: абсолютно не возвращает ожидаемых результатов

Question

Позиция Firefox: абсолютно не возвращает ожидаемых результатов

0

Я хочу наложить ярлык на изображение на моей веб-странице. Использование позиции: абсолютная на этикетке и float: слева на img, я получил ее для работы во всех браузерах, на которых я тестировал ее, - кроме Firefox (3 и 4).

Вот что будет выглядеть в основном html:

<h3>Header</h3>

<div class="wrapper">   
    <span class="img-title">OVERLAY LABEL</span>    
    <img src="pic.jpg">
    <div class="text">
        <p>Some text about the lovely picture goes here</p>
    </div>
</div>

<p>Footer bits</p>

и CSS:

.wrapper { 
    overflow: auto; 
}
.img-title { 
    position: absolute; 
}
img { 
    float: left; 
}

Может кто-нибудь подскажет мне, почему Firefox ведет себя иначе, чем Chrome, IE, Safari и Opera в отношении позиции: абсолютный?

Вот моя проблема?

JeremyH 08 нояб. 2013, в 20:55

Источник

0

Firefox 3 и 4 ??
j08691 08 нояб. 2013, в 19:36
0

Джереми, я также отредактировал ответ, чтобы помочь с твоей текстовой проблемой.
James 08 нояб. 2013, в 21:27

Теги:

html

css

firefox

1 ответ

Ещё вопросы

Джереми, я также отредактировал ответ, чтобы помочь с твоей текстовой проблемой.

James · Accepted Answer · 2013-11-08T16-41-00.000Z

Вы должны указать больше, чем это.

.wrapper { 
    border:1px solid red;
    overflow: auto; 
    position: relative;
}
.img_title { 
    position: absolute; 
    top:0;
    left: 0;
}
img { 
    float: left; 
}

Чтобы позиционировать изображение_title абсолютно, но относительно обертки, обертка должна располагаться относительно. Кроме того, вы должны также указать верхнюю и левую позицию абсолютно позиционированного заголовка.

Обновление. Ваш текст не отображается вверху, выровненный с вашим изображением, потому что <p> имеет некоторые дополнения или поля. Вы можете исправить это:

.text p {
    margin: 0; padding: 0
}

Джеймс, спасибо! Это сработало. Очень признателен.