Фиксированная позиция Div ALWAYS отображается сверху?

У меня есть тег фиксированной позиции, который в моем CSS-стиле выглядит следующим образом:

#facebook {
height: 249px;
width: 50px;
position: fixed;
left: 0px;
top: 200px;
}

На моем веб-сайте есть изображение заголовка flash (.swf), и когда разрешение браузера достаточно низкое, div facebook частично скрывается заголовком флэш-памяти.

Вот мой HTML:

 <body id="index">
 <div id="facebook"><img src="images/facebook.png" width="50" height="249" border="0"      usemap="#Map" />
 <map name="Map" id="Map">
 <area shape="rect" coords="2,154,40,191" href="#" onclick="location.href='http://www.youtube.com/'; return false;" />
 <area shape="rect" coords="3,202,39,240" href="#" onclick="location.href='http://www.facebook.com/group.php?gid=72781675198'; return false;" />
 </map>
 </div>
 <div id="wrapper">
 …
   <div id="title_box"><object type="application/x-shockwave-flash" 
    data="images/flash.swf" 
    width="960" height="450">
 <param name="movie" value="images/flash.swf" />
 <img src="images/header.jpg" />
 </object></div>

Как я могу получить его, так что моя постоянная позиция div в facebook всегда отображается поверх этого содержимого .swf?

Заранее спасибо

Джон

Ответы

Ответ 1

Если содержимое помечено флеш-памятью, даже с правильным z-индексом, добавьте wmode="transparent" во флэш-вставку script.

Ответ 2

Z-индекс

Используйте стиль CSS z-index, который устанавливает вертикальный порядок ваших элементов. И дайте ему достаточно высокое значение, чтобы оно всегда отображалось сверху:

#facebook {
    height: 249px;
    width: 50px;
    position: fixed;
    left: 0px;
    top: 200px;
    z-index: 100;
}

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

Ответ 3

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

#menu
{
z-index: 100;
}

Ответ 4

попробуйте position: absolute;

Ответ 5

Просто пояснить: просто установка z-индекса на фиксированный элемент не будет делать трюк. Установка абсолютного положения не даст вам эффекта после. Возможно, установление родительского элемента в фиксированное положение и ребенка в абсолютное положение и соответствующий z-индекс?

Пример:

.fixed { position: fixed; z-index: 4000000; width: 200px; right: 0; top: 0; cursor: pointer; }
.fixed .show-menu { display:block; background-color: #ffffff; width:100%; padding: 10px; font-size: 18px; right: 0; position: absolute; z-index: 60000000; }