абсолютная и относительная ширина и высота положения

Я знаю, что является абсолютной и относительной позицией, но некоторые моменты до сих пор не очищены. для справки

CSS:

.rel{ position:relative; background:red; } .abs{ position:absolute; background:blue; } 

HTML:

 
rel
abs

теперь пункты:

  • относительный div принимает ширину 100% автоматически, но абсолютный div принимает только ширину содержимого. Зачем?

  • когда я даю высоту 100%, в относительном div нет эффекта, но абсолютный div занимает 100% высоты. Зачем?

  • когда я даю margin-top: 30px – это сдвиг абсолютного div, но когда я даю top: 30px, то только относительный div shift. Зачем?

  • когда я не даю top:0 , left:0 до абсолютного div, это занимает выше div height. Зачем?

  1. position:absolute установки position:absolute удаляет рассматриваемый элемент из нормального streamа структуры документа. Поэтому, если вы явно не задали ширину, она не будет знать, насколько она будет широка. вы можете явно задать width:100% если это тот эффект, который вам нужен.

  2. Элемент с position:relative в целом ведет себя так же, как и нормальное position:static элемент. Поэтому установка height:100% будет иметь эффекта, если родительский элемент не имеет определенной высоты. Напротив, абсолютные позиционированные элементы удаляются из streamа документа, поэтому они могут свободно регулироваться на любую высоту, которую содержит их содержащий элемент.

  3. Вероятно, это связано с родительскими элементами в вашем HTML, но я не могу помочь дальше, если вы не предоставите полный HTML и CSS своей страницы.

  4. Значение по умолчанию для верхнего и левого свойств является автоматическим. Это означает, что браузер будет вычислять эти настройки для вас и устанавливать их там, где элемент будет отображаться, если он не имеет position:absolute .

  • Почему мой jQuery: not () не работает в CSS?
  • Как изменить переменную CSS с помощью JS?
  • Вложенные псевдоэлементы внутри псевдоэлементов
  • Браузер не может получать / находить относительные ресурсы, такие как CSS, изображения и ссылки при вызове сервлета, который пересылает JSP
  • CSS: центральный элемент в элементе
  • Обнаруживать iPhone / iPad исключительно css
  • Можно ли центрировать текст в поле выбора?
  • разница между css height: 100% vs height: auto
  • CSS Div растягивает 100% высоты страницы
  • CSS Media Query - Soft-клавиатура нарушает правила ориентации CSS - альтернативное решение?
  • Размер canvasа HTML5 с помощью атрибутов CSS и элементов
  • Давайте будем гением компьютера.