Абсолютное позиционирование после стола не работает?

0

У меня есть простая проблема, когда я думаю, что мне не хватает чего-то очевидного, но не могу найти ничего, чтобы понять поведение. У меня есть таблица, а затем тег ap и тег div. По умолчанию все теги одинакового уровня. Только внутренний-div в последнем div имеет абсолютное положение. Я думал, что абсолютная позиция во внутреннем-div будет абсолютно позиционирована относительно внешнего div (id = 'outer').

Поэтому я ожидаю, что дисплей будет состоять из вертикального порядка таблицы Text1 и, наконец, Text2. Это не то, что происходит. Таблица отображается как ожидалось, текст 1 также отображается после таблицы, как ожидалось. Тем не менее, текст 2 отображается поверх таблицы, потому что он занимает абсолютную позицию из тега body (или что-то другое - самый внешний тег). Зачем? Как получить Text2 для позиции после Text1. Мне нужно, чтобы Text2 был помещен абсолютно по какой-то причине. Удаление абсолютного позиционирования на div (id = 'inner') не является вариантом. Итак, как обойти это?

  <table border="1" style="border-collapse:collapse;">
      <tr>
        <th>Header 1</th>
      </tr>
      <tr>
        <td >09/12/2013 12:41 pm</td> 
      </tr>
  </table>
  <p style="display:block;">Text1</p>
  <div id="outer">
    <div id="inner" style="display:block;position:absolute;top:30px;">Text2</div>
  </div>
Теги:
html-table
absolute

3 ответа

1
Лучший ответ

Поскольку вы используете абсолютное положение, это происходит, снимается с DOM и выполняется поиск нового содержащего блока:

Содержащий блок для позиционируемой коробки устанавливается ближайшим позиционированным предком

Если вы не установите родительский объект с любым значением position тогда div отключен и принимает значения относительно другого родителя.

Установите положение на внешний div.

<div id="outer" style="position:relative">
  <div id="inner" style="display:block;position:relative;top:30px;">Text2</div>
</div>

В совете попробуйте обработать ваши стили в файле CSS

Поделиться
  • 0
    ХОРОШО! Спасибо!!! Тот же ответ, но без объяснений пришел и раньше. Его кристально ясно сейчас. Я узнал о ближайшем расположенном предке, но не знал, что, если для него не задано положение, оно пропускается при поиске ближайшего предка.
  • 1
    Позаботьтесь о том, чтобы это не просто position:relative делает работу родительским, он работает с другим значением, например, absolute или fixed @Samir
Показать ещё 1 комментарий
1

вы добавили позицию: относительно #outer div?

Поделиться
  • 0
    Ты прав! Это сработало после того, как я это сделал. Я проголосовал за ваш ответ, но прежде чем принять ответ, я хотел бы понять, поэтому я знаю, что он будет работать во всех ситуациях. Относительное означает, относительно того, где он был бы в нормальном потоке. Поскольку я не указываю никакую другую позицию (слева, сверху), почему имеет значение сделать внешний div относительным? Ваше объяснение очистит много путаницы. Я думал, что хорошо понял позиционирование до этой проблемы. Еще раз спасибо.
  • 1
    абсолютные элементы позиционируются относительно первого родительского элемента, который не позиционирован как статический (значение по умолчанию свойства position). Если у вас нет такого родительского элемента, он помещается в окно. надеюсь, это проясняет :)
1

Потому что вы поставили position:absolute;

код здесь:

<table border="1" style="border-collapse:collapse;">
      <tr>
        <th>Header 1</th>
      </tr>
      <tr>
        <td >09/12/2013 12:41 pm</td> 
      </tr>
  </table>
  <p style="display:block;">Text1</p>
  <div id="outer" style="position:relative">
    <div id="inner" style="display:block;top:30px;">Text2</div>
  </div>

Вы можете поставить position:relative для вашего "внешнего" div или для вас "внутренний" div.

Поделиться
  • 0
    Абсолютная позиция элемента всегда позиционируется от ближайшего элемента div, а не от "вершины" тела. Или я так понимаю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню