Слой поверх слоя с overflow hidden

[vlasenkov]

Здравствуйте.

Прошу помощи в одной проблеме. Допустим у нас в шапке есть слой, в катором расположена Карусель (эта карусель работает через overflow: hidden, естественно), и теперь мне поверх этого слоя нужно сделать еще один слой: с меню или логотипом, например. И тут возникает проблема, что этого не получается сделать.

Пробовал присваивать и абсолютное позиционирование, и z-index и отрицательные margin все равно слой с логотипом или меню попадает под слой с Каруселью.

Сталкивался ли кто-нибудь с такой проблемой и можно что-то с этим поделать?

Пример картинка, то что должно получится (1.Слайдер, должен находится под 2.Логотип и 2.Меню):

[klierik]

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

[vlasenkov]

  On 1/11/2013 at 8:19 AM, klierik said:

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

Т.е. вы имеете ввиду, что должен быть отдельный слой с каруселью и отдельный слой с логотипом и меню? Я так делал. Карусель в отдельном слое, дальше делал в другом слое логотип и меню и ставил position:absolute; но они уходили под Карусель. Пытался ставить разные z-index, но все тщетно.

[klierik]

выложите пример в интернет или сюда: http://jsfiddle.net/

[vlasenkov]

Очень странно, но получилось. Правда у меня появился еще один вопрос. Сейчас я это сделал присвоив логотипу position: absolute, а можно ли это как-то сделать без абсолютного позиционирования, пробовал с отрицательным margin, но не получается, уходит под Карусель.

Спрашиваю это, потому что, например, нужно сделать, чтобы меню было по центру, если это делать с абсолютным позиционированием, тогда центрировать его придется через JS, а хотелось бы без него.

http://s16.ru/test/ - тут лежит пример.

HTML

    <div class="header_slider">
	    <ul id="header-slider" class="jcarousel-skin-tango">
		    <li><img src="img/1.jpg" alt="" /></li>
		    <li><img src="img/2.jpg" alt="" /></li>
	    </ul>
    </div>
    <div class="header">		  
	    <div class="header_logo">
		    Logo
	    </div>
	    <div class="header_menu">

	    </div>
    </div>

CSS

.header {
    position: absolute;  
    top: 0;
    left: 0;
}

[klierik]

http://jsfiddle.net/klierik/Zrv4u/

[ilyautkin]

А если так: http://jsfiddle.net/Zrv4u/1/

[vlasenkov]

Большое спасибо, буду разбираться со всем этим.

[vlasenkov]

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

Необходимо сделать нестандартный шрифт на том же сайте.

http://s16.ru/test/ - по этому же адресу, я пытался это сделать. Скачал нужные шрифты и сделал объявление в css, но почему-то не получается.

CSS

@font-face {
    font-family: "MyriadPro";
    src: url('fonts/myriadpro.eot');
    src:
	    url('fonts/myriadpro.eot?#iefix') format('embedded-opentype'),
	    url('fonts/myriadpro.woff') format ('woff'),
	    url('fonts/myriadpro.ttf') format ('truetype'),
	    url('fonts/myriadpro.svg') format ('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    color: #5f5f5f;
    background: #fff;
    font-family: "MyriadPro";
    font-size: 13px;
    padding: 0;
    margin: 0;
}

Почему-то шрифт не меняется. Может это и от настроек браузера зависит?

[vlasenkov]

Сделал по-другому:

CSS

@font-face {
font-family: 'MyriadPro';
src: url('fonts/myriadpro.eot');
src: local('?'), url('fonts/myriadpro.woff') format('woff'), url('fonts/myriadpro.ttf') format('truetype'), url('fonts/myriadpro.svg') format('svg');
font-weight: normal;
font-style: normal;
}

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