Совместное использование float и z-index.

[eclipse]

Всем привет.

На странице имеются два блока - main и ontop. В main находится контент страницы, а в ontop будет шапка и главное меню.

Я хочу, чтобы ontop находилcя точно над main.

Казалось бы, чего проще - сделать z-index блока ontop больше, чем у main. Но... в main есть несколько вложенных блоков с float. И как только появляется ontop, они съезжают вниз по вертикали на высоту ontop.

ontop относительно main у меня является вложенным элементом с position:relative. Position:absolute, к сожалению, не подходит, т.к. main выровнен по центру страницы, и при разных разрешениях экрана его положение по оси X разное.

Подскажите, что делать?

[psywalker]

ты чё запутал меня, короче во первых попробуй блоку с Флоатами внутри задать overflow: hidden; а во вторых лучше нарисуй то, что ты хочешь получить, будет легче тебе помочь тада

[eclipse]

короче во первых попробуй блоку с Флоатами внутри задать overflow: hidden;

Не помогает

а во вторых лучше нарисуй то, что ты хочешь получить, будет легче тебе помочь тада

[psywalker]

да а чё тут думать то, просто сделай потоком обычным, Див, за Дивом и всё, в верхнем сделай Шапку, а в нижнем что хош, флоаты, фигаты и т. д.

покажи свой код кстати на всякий случай

[eclipse]

Да, действительно .

После размещения шапки в основном потоке надо к ней еще приписать:

#ontop {

...

position: relative;

top: -1200px; /* где 1200px - это высота main */

left: 0;

z-index: 2;

}

Только вот внизу окна браузера остается пустое пространство, по высоте равное блоку ontop:

http://anton97rus.narod.ru/layer-test-1.html

Можно ли его как-то ликвидировать?..

Edited June 5, 2009 by eclipse

[psywalker]

послушай дружище, я только одного не пойму, зачем тебе какие-то З-индексы и прочая лабуда, почему бы прото не взять, да и сверстать по человечески, без заморочек?

У тебя же банальная ситуация, шапка, контент, футер...Пусть будет шапка Фиксированной высоты, Футер тоже, ну а в Середине контент, и делай в нём, что душе угодно, засовывай флоаты, фигаты и чё хош ваше))

[Searcher]

Вот разные кроссбраузерные варианты верстки блоками:

http://www.dynamicdrive.com/style/layouts/category/C10/

http://layouts.ironmyers.com/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/