Позиция относительного фиксированного выравнивания. Зачем?

У меня была проблема с размером двух разделов, чтобы заполнить всю ширину страницы без перекрытия, используя проценты (60% ширина и 3% правого края на одном и 37% на другом, что было абсолютно позиционировано). Я упростил свою проблему в jsFiddle и фактически исправил ее. У меня было два теста, в которых единственная разница заключается в том, что родитель имеет позицию: относительный набор.Позиция относительного фиксированного выравнивания. Зачем?

Почему это исправить мою проблему? Я помню, что мне нужно было сделать такое решение, когда вам нужна позиция: абсолютный элемент, чтобы позиционировать себя абсолютно по отношению к его родителям, но я не задавал достаточно вопросов относительно того, что происходит и почему это работает.

Вот jsfiddle http://jsfiddle.net/vajzyqe6/

Вот CSS

#test1, #test2 
{ 
    width:80%; 
} 
.type1 
{ 
    background-color:#FFAAAA; 
    margin-right:3%; 
    margin-left:auto; 
    width:60%; 
} 
.type2 
{ 
    position:absolute; 
    background-color:#AAFFAA; 
    width:37%; 
} 
#test2 
{ 
    position:relative; 
} 
#test2 > div.type1 
{ 
    background-color:#AAAAFF;  
} 
#test2 > div.type2 
{ 
    background-color:#FFFFAA; 
}

Вот HTML

<div id="test1"> 
    Test1 
    <div class="type1">Type 1</div> 
    <div class="type2">Type 2</div> 
</div> 
<br><br> 
<div id="test2"> 
    Test2 
    <div class="type1">Type 1</div> 
    <div class="type2">Type 2</div> 
</div>

источник

2014-09-09 Coburn

'Почему это происходит? Почему происходит ** что? Как вы хотите заполнить страницу? Вопрос слишком неоднозначен –

Разъясняется это более – Coburn

при использовании в процентах высоту или ширину в CSS он будет установлен в процентах от первой position : relative родителей. здесь ваш прямой родитель находится на уровне 80%, поэтому, если он установлен на абсолют, ваши дочерние divs будут установлены на 60% и 37% из 100%, поэтому они перекрываются, теперь, если родительский элемент установлен на относительный, дети будут установлены на 60% и 37% из 80% и поэтому не перекрываются

источник

2014-09-09 23:15:18

Есть ли причина, по которой он решил использовать первый относительный элемент позиции по сравнению с первым родителем? – Coburn

Css работает именно так :), нет, но причина в том, что элемент действительно содержит только родителя с относительной позицией, если вы используете поля или верхний, левый, нижний, правый, вы можете переместить его из абсолютного родителя, но он все равно будет в своем родителе с относительным положением –

Вопрос не очень ясен, но вот ответ в любом случае.

В первом примере .type1 будет 60% тела, потому что он относительный.

Во втором Exemple, .type1 будет 60% #test2 (что 80% тела), потому что это то, что вы устанавливаете, когда вы добавляете position: relative к родителю.

Вкратце: absolute элемент будет иметь размер и расположение в зависимости от ближайшего relative родителей.

источник

2014-09-09 23:20:28 Cohars

Позиция относительного фиксированного выравнивания. Зачем?

ответ

Смежные вопросы