z-index - логотип идет за заголовком

0

Я делаю сайт, но мой логотип идет за заголовком, хотя индекс z установлен выше. Я не знаю почему? Я установил позиционирование, так почему он не работает? Наложения являются прозрачными.png s, поскольку я хотел сделать его совместимым со всеми браузерами, а RGBa - нет.

Изображение 174551

Css:

@charset "utf-8";

body {
    margin-left: 0px;
    margin-right:0px;
    margin-top: 0px;
    padding:0px;
    z-index:-101;
}

#wrapper{
    margin-left:17.3875%;
}

#BG {
    height: auto;
    width: 100%;
    position: fixed;
    z-index: -100;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 1040px;
}
/*HEADER*/
/*===================================================================*/
#header{
    margin:0px;
    padding:0px;
    z-index:-98;
    position:fixed;
    z-index:-99;
    width:65.225%;
    height:18.2022472%;
    background:url(WireFrame/Nav%20Bar.png)
}

.logocontainer{
    width:34.1510157%;
    height:100%;
    margin:0;
    padding:0;
    z-index:-1;
    position:absolute;
    }

.logoimage{
    max-height:100%;
    max-width:100%;
    z-index:1;
    position:absolute;
}

#navigation{

}
/*BODY*/
/*===================================================================*/
#bodyoverlay{
    background:url(WireFrame/Body.png);
    position:fixed;
    z-index:-99;
    height:100%;
    width:65.225%;
    background-repeat:repeat-y
}

#body{
    z-index:-98;
    height:100%;
    width: 100%;

}

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<img src="file:///U|/Year 8/ICT/Webdesign/WireFrame/Background.jpg" name="BG" width="4000" height="2670" id="BG" />
<div id = "wrapper">
    <header>
    <div id = "header">
        <div class="logocontainer">
        <img src="WireFrame/Logo.png" class="logoimage" />        </div>
        <nav>
            <div id = "navigation">         </div>
        </nav>
    </div>
    </header>
    <!---->
    <div id = "body">
        <div id = "bodyoverlay">
        </div>
        <div id = "Content">
        </div>
    </div>
</div>
</body>
</html>
Теги:

2 ответа

1

Есть ряд ошибок в том, как вы используете свойство z-index:

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

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

Поделиться
0

Элементы, которые являются частью макета, должны быть фоном CSS, а не встроенными изображениями. Это заставляет все эти проблемы внезапно уйти.

Поделиться
  • 0
    какой бит ты имеешь ввиду?
  • 0
    Логотип и т. Д. Если это не контент (часть интерфейса), это должно быть фоновое изображение, а не встроенное изображение. Таким образом, вам не нужно играть во все виды позиционных игр.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню