Position:relative или лучше иначе? Ищу гуру.=)

[logicface]

Всем привет! Вот хотел бы поинтересоваться как правильно сделать эту штуковину, на ум конечно приходит много идей, в том числе и разбиение логотипа на 2 части, но пока остановился на таком варианте, так как он мне кажется самым нормальным.

http://jsfiddle.net/K7UV3/2/

З.Ы. - header  и opol полностью статичны, в них ничего не тянется и текстом дополняться скорее всего не будет.

В диве logo будет еще 2 дива. 1 для текста - имей дело с лучшими 2ой для названия компании. Хотя можно обойтись и без 2ух дивов, не столь важно.

Opol - это див с бэкграундом-картинкой, внутри которого будут находиться еще 2 рекламных дива размеров 486х60 с низу.

Вот для наглядности что планирую:

 

 

[logicface]

up

[rus]

не надо апать, надо адекватно писать заголовок темы и ее содержание - так, что бы без напряга для читающих было доступно пониманию и было желание вникнуть в проблему, в противном случае - пересмотреть тему, либо искать ответы в другом месте.

[logicface]

Ну по моему лучше чем я темы еще описаны не были.) Я сделал все для того что бы понять суть проблемы было легко, даже выложил картинку для более легкого понимания.

[rus]

а при чем тут: position: relative;?

[logicface]

Ну при том, что это основа всей конструкции, если коричневому блоку не дать position:relative он не будет выступать за зеленый блок.) будет прятаться за ним, а мне надо что бы он выступал.) То бишь в коде - черный блок.

[ShumNo]

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

[rus]

я бы сказал это не relative, а absolute, так как relative - это по сути родитель absolute, т.е. дает понять браузеру от какого элемента позиционировать и как правильно выстраивать блоки.

в вашем случает, конечно же без позиционирования не обойтись, ибо по картинке видно, что три разных блока чуть наезжают друг на друга (хотя в коде только логотип идет поверх двух дивов), и тут не только позиционирование, но и z-index тоже придется использовать и все это в одном общем диве которому position: relative.

если я правильно все понял конечно...

[logicface]

Мне нужно что бы черный блок был на самом верху а желтый блок был под черным как в моем демо, а половина зеленого блока была в самом низу.=)

Ну так получается если я задаю relative черному блоку, то черный блок считает зеленый своим родителем и позицианируется относительно зеленого блока, что вроде мне и нужно для удобства подсчета. Да, мне и нужно что бы только черный блок был выше других.=) Просто зеленый блок - это хедер и он должен включать в себя черный блок, по этому высота зеленого блока по любому будет такая же как у черного, но зеленому блоку не нужна такая высота, нужна только половина этой высоты, и что бы это скрыть на него заползает желтый.=)))

То бишь вот как должен выглядеть сайт, красными точками я обозначил границу желтого блока, иногда он нужен будет что бы менять там backgraund.

[logicface]

Кстати я только что потыкал немного мой код, сделал так:

http://jsfiddle.net/K7UV3/7/

Уменьшил высоту хедера до 40px и сделал черный абсолютно позиционированным и почему то черный див стал имееть отступ сверху, пришлось дописать ему маргин-топ с минусом в 20 пикселей. Этот способ так же позволяет удалить блок clear.

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

Edited January 24, 2014 by logicface

[logicface]

Еще немного помучив код я сделал так:

http://jsfiddle.net/K7UV3/8/

Задал хедеру позицию relative, задал логотипу позицию absolute и float:left да бы остальной контент знал что там с боку место занято. Переместил текст, так как он был перед логотипом и по этому толкал его вниз, благодаря чему теперь в диве logo не надо писать margin-top:-20px ну вроде и все, так наверное лучше всего будет, и зеленый блок нужной высоты 40px а не 60px и дива со свойством clear:both нету. И желтый блок на нужном месте. Z-index тоже вроде теперь без надобности.

Хотя можно задать логотипу позицию absolute, тогда зеленый див не будет понимать что черный там вообще есть, за то в желтом диве текст не будет обтекать черный, хз как лучше.)

http://jsfiddle.net/K7UV3/9/

Вот с absolute.

Спасибо за ранее Rus'y, немного навел порядок в голове.=)

Edited January 24, 2014 by logicface