HTML код:CSS: почему тексты будут двигаться вверх после удаления позиции: абсолютный
<!DOCTYPE html>
<html>
<head>
<style>
h2 { position:absolute;}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
</body>
</html>
Вопрос:
Если удалить эту строку: position:absolute;, тексты в <h2>...</h2> будет двигаться вверх, почему?
В виде по умолчанию, без CSS ...
Когда position: absolute; есть, поля не разрушились.
При удалении position: absolute;, коллапс наценки, и он получает смешались с запасом тела.
Добавить в CSS:
body {margin: 0; padding: 0;}
При указании position:absolute,
элемент удаляется из документа и помещен именно там, где вы скажите ему.
Это говорит браузеру, что все, что должно быть расположено, должно быть удалено из обычного потока документа и будет размещено в точном месте на странице.
Он также выведен из нормального потока документа - это не повлияет на то, как элементы, находящиеся перед ним или после него в HTML, размещены на веб-странице.
, что из-за Маржу браузера по умолчанию, если таковым вы устанавливаете наценку до нуля, вы можете удалить абсолютный параметр:
h2
{
position:absolute;
margin:0;
}
Это происходит потому, что настроек макета.
Если вы используете position: absolute до h2, то родительский элемент, который является body тегом, не будет автоматически изменять размер его высоты. таким образом, свойства поля по умолчанию и свойства заполнения появятся из элемента h2. и когда вы удалите position: absolute от h2, то body увеличит свою высоту в соответствии с ее дочерним элементом.
Это также происходит с float.
Для понимания ясно себя, дают разные background-color/border CSS свойство к каждому элементу, т.е. bodyhtml и h2 и проверить с помощью своего любимого инструмента разработчика.
Почему downvote?Хотя это не отвечает на вопрос, этот ответ подсказывает причину, по которой это происходит (поля не рушились). Таким образом, установка поля тела на 0 фиксирует его. –