Странная мелкая проблема с относительным позиционированием CSS - PullRequest
Новая
       11

Странная мелкая проблема с относительным позиционированием CSS

1 голос
/ 25 апреля 2009

Я заметил необычную проблему сегодня, когда собирал вместе быструю страницу типа «в стадии разработки», где я перемещаю текст на изображение, используя относительное расположение. (Эта страница была "вдохновлена" автономной страницей SO, если вам интересно) 

<html>
  <head>
    <title>Bronco Marching Band</title>
  </head>
  <body style="background-color: #888;">
    <div style="text-align: center;">
      <img src="standby.jpg" width="799px" height="600px" alt="Please Stand By"
       title="The Bronco Band website is down for a major upgrade. Please check back later." 
       style="width: 620px; height: 465px; opacity: 0.8;" />
      <div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: relative; top: -300px; left: 0px;">
        PLEASE STAND BY
      </div>
    </div>
  </body>
</html>

Кажется, что область, где раньше находился относительно позиционированный div, все еще занимает место. то есть он оставляет пустое пространство под изображением, где бы находился div, если бы он не был расположен.

Есть ли способ обойти это?

Ответы [ 2 ]

5 голосов
/ 25 апреля 2009

Относительно расположенные элементы по-прежнему занимают место. Вы на самом деле хотите абсолютно позиционированный элемент ... вы просто хотите, чтобы он был расположен абсолютно относительно контейнера! 

<div style="text-align: center;position:relative; zoom: 1;"> 
  <img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" title="The Bronco Band website is down for a major upgrade. Please check back later." style="width: 620px; height: 465px; opacity: 0.8;" /> 
  <div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: absolute; top: 200px; left: 0px; width: 100%; text-align:center"> 
    PLEASE STAND BY 
  </div> 
</div>

Ключевые изменения:

  • Контейнер div имеет position: relative набор стилей
  • Child div имеет набор стилей position: absolute, в результате чего он позиционируется в абсолютных координатах внутри родительского элемента .
  • Я позиционируюсь относительно верха родительского элемента и делаю позиционированный div во всю ширину, чтобы text-align: center работал.

Edit: Чтобы IE6 правильно позиционировался, я использовал хак для форсирования макета контейнера DIV: стиль zoom: 1. Если вам не нужна поддержка IE6, вы можете пропустить это.

Проверено в: FF3, IE6, Chrome1, Chromium2

Демо: http://jsbin.com/uqisa

3 голосов
/ 25 апреля 2009

Вместо этого: 

position: relative;
top: -300px;

Попробуйте это: 

margin-top: -300px;

В отдельной заметке, внутри вашего тега <img />, вы должны также изменить это: 

width="799px" height="600px"

к этому: 

width="799" height="600"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...