Задачка

[i-MiF]

Итак глупая задачка )

Условие: В сером слое (DIV) находятся два других: красный и желтый. Надо сделать так, как показано на схеме (1), т.е. чтоб оба цветных слоя были прикреплены к верхнему краю Серого, и один налегал на другой, не важно какой именно на какой, главное результат, визуально роли не сыграет.

Проблема: Как ни крути - один слой заходит под другой - схема (2). Пробовал позиционировать через z-index, но не выходит..я что-то упускаю.

@темы: Web-дизайн, Дизайн

Comments

[Коа]

Попробуй в красном диве задать значение margin-top отрицательное. Подбирать на глаз.

[i-MiF]

Дело в том, что этот элемент повторяется многократно на странице, и у одних Желтый слой содержит три текстовые строчки, а у других одну. Вариант конечно сделать условие, чтоб он для обоих вариантов пользовал разные стили, НО всяко ведь есть вариант как правильно вложить 2 слоя в один и выровнять их как надо..вопрос в том - как? Знать бы хотябы в какую сторону копать..пробовал гуглить по теме, но как-то тщетно..

[i-MiF]

Проблема кстати давно решена:

<div style=" width:400px; height:200px; background-color:#CCC; position:relative;">
	<div style="width:300px; height:100%; background-color:#FC0; position:relative;"></div>
	<div style=" width:200px; height:100px; background-color:#F30; position:absolute; right:0px; top:0px;"></div>
</div>

Все оказалось очень просто. Значение position: absolute работает относительно материнского объекта если у того стоит значение relative, как-то так )