Используйте следующий код, чтобы добавить непредвиденного первого ребенка к непреднамеренно движущемуся div:
.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
Преимущество этого метода заключается в том, что вы не нужно менять CSS любого существующего элемента и, следовательно, оказывает минимальное влияние на дизайн. Рядом с этим добавленный элемент является псевдоэлементом, который является not в DOM-дереве.
Поддержка псевдоэлементов широко распространена: Firefox 3 +, Safari 3+, Chrome 3+, Opera 10+ и IE 8+. Это будет работать в любом современном браузере (будьте осторожны с новым ::before
, который не поддерживается в IE8).
Если у первого дочернего элемента элемента есть margin-top
, родитель отрегулирует свое положение как способ сбрасывания избыточных полей. Зачем? Это также так.
Учитывая следующую проблему:
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>
<div class="parent"><!--This div moves 40px too-->
<div class="child">Hello world!</div>
</div>
Вы можете исправить ее, добавив ребенка с контентом, например, простое пространство. Но мы все ненавидим добавлять пробелы для того, что является проблемой только для дизайна. Поэтому используйте свойство white-space
для подделки содержимого.
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="fix"></div>
<div class="child">Hello world!</div>
</div>
Где position: relative;
обеспечивает правильное позиционирование исправления. И white-space: pre;
заставляет вас не добавлять какой-либо контент - например, пробел - к исправлению. И height: 0px;width: 0px;overflow: hidden;
гарантирует, что вы никогда не увидите исправление.
Вам может потребоваться добавить line-height: 0px;
или max-height: 0px;
, чтобы гарантировать, что высота в нуле в старых браузерах IE (я не уверен) , И, возможно, вы могли бы добавить <!--dummy-->
к нему в старых браузерах IE, если это не сработает.
Короче говоря, вы можете сделать все это только с помощью CSS (что устраняет необходимость добавления фактического ребенка в HTML DOM-дерево):
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="child">Hello world!</div>
</div>