Позиция элементов на странице

[Mishus3W]

Доброго времени суток!

Верстая сайт у меня возник вопрос, как контейнер DIV, размещенный в другом контейнере, сместить вниз на половину его высоты и ширины?

Хочу сразу сказать, что ширина и высота котнтейнера не заданы.

Код который я написал, приведенный ниже:

<style>
.A, .B{
width: auto;
height: auto;
display: block;
box-sizing: border-box;
font-size: 36px;
}

.A{
position: absolute;
margin: 30px;
background-color: #07A2FE;
border: 1px solid #0080CD;
}
.B{
position: relative;
background-color: #FFCF3F;
border: 1px solid #E9AF00;
top: 50%;
left: 50%;
}
</style>
<div class="A"><div class="B">Example</div></div>

[wwt]

у блока А не заданы размеры значит высота равно 0. А 50% от 0 это 0;

Edited August 7, 2013 by wwt

[Mishus3W]

Интересно девки пляшут... Размеры не заданы? Так почему же тогда ширина не равна нулю?

[121990]

Потому что верстать нужно с пониманием. Зачем задавать width и height : auto если auto и так задано блокам по умолчанию?

Так почему же тогда ширина не равна нулю?

Потому что при значении auto ширина задается исходя из содержимого контейнера.

И абсолютное позиционирование надо было задать блоку B а не A. Ты же не понимая удалил блок А из потока документа. и хотел блок B расположить относительно его. А блоку B задал относительное позиционирование который вычисляет путь относительно своей позиции в потоке. Из-за такого бреда в результате блок B не в состоянии вычислить высоту в процентах.

Учи матчасть и не пиши классы большими буквами.

Edited August 7, 2013 by 121990

[Mishus3W]

Зачем задавать width и height : auto если auto и так задано блокам по умолчанию?

Я это сам знаю. Дело в том что это задано для наглядности примера, ведь на одном из других форумов возникло много недоразумений без указания этих строк кода

Потому что при значении auto ширина задается исходя из содержимого контейнера.

Почему же тогда высота не задается исходя из содержимого контейнера?

Из-за такого бреда в результате блок B тупит.

Тогда почему смещение влево работает правильно?

не пиши классы большими буквами.

Спасибо за замечания, но это я сделал только для этого примера, если Вас не устраивает я могу написать строчными буквами.

И абсолютное позиционирование надо было задать блоку B а не A.

Вот задал, который из них работает так как в исходном примере?

Edited August 7, 2013 by Mishus3W

[121990]

Еще раз повторяю. У тебя понимания нет. Вместо того чтобы вникнуть почитать, ты опять выкидываешь свой бред...

Edited August 7, 2013 by 121990

[Mishus3W]

ты опять выкидываешь свой бред...

Хорошо, если так уж случилось, напиши этот код так чтобы получилось следующее:

если у тебя это получится - я здюсь, иду заново разбираться в CSS и HTML

Еще добавлю размеры блока A должны зависеть от размеров блока B, но размеры блока B не заданы

[121990]

ТС, ты упоротый! Квадратное катаешь, а круглое носишь! Не сразу тролля распознал...

[wwt]

Интересно девки пляшут... Размеры не заданы? Так почему же тогда ширина не равна нулю?

Вы слабо понимаете что от чего зависит. Вы стараетесь манипулировать позиционированием и размерами, не понимая что на что влияет.

1) размеры блока А зависят от размеров В

2) Размеры блока В зависят от контента содержащегося в нем

3) Для того чтобы сдвинуть блок В так как вы хотите нужно задать ему абсолютное позиционирование относительно блока А. Но как только вы это сделаете блок А потеряет размеры ибо абсолютно позиционированный блок выпадает из потока и не влияет на размеры элементов в потоке.

4) Отсюда вывод нужно разделить две задачи на 2 части: получить размеры блоку А и позиционировать блок В

5) сделать это можно вот так: http://jsfiddle.net/wSx38/

6) если вы присмотритесь приходится ухищряться пряча контент с помощью прозрачного текста и создавать псевдоэлемент который мы и видем вместо блока В который в свою очередь получает контент из атрибута блока В содержащего тот же же что и в части контента.

Если поймете я за вас рад ). Я другого варианта не вижу, может конечно кто-то более опытный на этом форуме предложит более красивый вариант. А вам удачи. Хороший пример для разминки мозгов.

Edited August 7, 2013 by wwt

[121990]

Интересное решение со всплывающей подсказкой(:

Edited August 7, 2013 by 121990