css3 z-index проблемы, не работает? - PullRequest
Новая
       0

css3 z-index проблемы, не работает?

0 голосов
/ 07 января 2012

Я работаю над проектом Uni и мне нужны мои собственные изображения, чтобы сформировать фон для нескольких страниц.У меня есть логотип ключа, кнопка «Далее» и «Назад», затем изображение.Я хотел бы, чтобы изображение лежало за всеми этими элементами.я назначил каждому элементу относительную / абсолютную позицию и z-индекс.Однако изображение все еще находится под этими другими элементами.Любой совет?Я найду свой относительный CSS / HTML и выложу его ниже.

HTML: 

<body>
<div id="logo">
<img src="images/key.jpg"  width="3%" height="3%"/>
</div>

<div class="next">
<a href="scene2.html"> Next</a>
</div>

<div class="back">
<a href="abduction.html"> Back</a>
</div>

<div class="backing">
<img src="images/scene1.jpg"  width="800" height="800"/>
</div>

</body>
</html>

и CSS: 

#logo {
    position:relative;
    z-index:200;
}

.backing {
    position:absolute;
    z-index:0;
    float:left;
}

.next .back {
    position:relative;
    z-index:180;
}

1 Ответ

1 голос
/ 07 января 2012

Ваш поддерживающий элемент на самом деле находится позади ваших других элементов, просто он находится под ним. Если вы поместите элемент поддержки в ваш HTML-документ первым, он окажется под остальной частью страницы.

enter image description here

Одной из альтернатив будет установка свойства background-image тега body вместо установки z-индексов для всех ваших элементов.

Есть ли причина, по которой вы этого еще не сделали?

Чтобы установить фон тега body из HTML (желательно, если у вас много страниц с разным фоном)

<body style="background-image: url('background1.png')">

Если вы измените страницу с помощью AJAX, вы можете установить фоновое изображение с помощью

document.body.style.backgroundImage = "background1.png";

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

Похожие темы

...