Элементы не отображаются, кажется, скрыты за фоновым изображением? - PullRequest
Новая
       0

Элементы не отображаются, кажется, скрыты за фоновым изображением?

4 голосов
/ 09 июля 2011

Может ли кто-нибудь подсказать мне, почему мой элемент (id = "stuff") не будет отображаться? 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
 <title>blah</title>
<style type="text/css" media="screen, print, projection">

body{     
    width: 100%;     
    height: 100%;     
    margin: 0;     
    padding: 0;      
}
img#background {     
    position: absolute;     
    top: 0;     
    left: 0;     
    width: 100%;    
    height: 100%; 
    margin:0;     
    padding:0;
} 
#stuff{
background: black;
height: 50px;
width: 100px;
z-index: 2;
}


</style> 
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />
<div id="stuff"><p>stuff</p></div>



</body>
</html>

Ответы [ 5 ]

5 голосов
/ 09 июля 2011

Дайте ему позицию, отличную от статической: 

#stuff{
    background: black;
    height: 50px;
    width: 100px;
    z-index: 2;
    position:relative;
}
4 голосов
/ 09 июля 2011

z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная). Добавление линии позиции к #stuff исправит это. 

#stuff{
 position:relative;
background: black;
height: 50px;
width: 100px;
z-index: 2;
}
2 голосов
/ 09 июля 2011 
img#background {
   z-index: -1;
}

http://jsfiddle.net/b9uUE/3/

2 голосов
/ 09 июля 2011

Чтобы повлиять на свойство z-index, вам нужно использовать что-то вроде absolute в позиции элемента.Попробуйте добавить 

position: absolute;

К #stuff

0 голосов
/ 09 июля 2011

Ваше фоновое изображение абсолютно позиционировано.Это означает, что он выходит за пределы нормального потока документа.По сути, вы переопределяете его положение и говорите, что оно должно быть здесь .

Установите img # background position:relative и удалите верхнюю и левую позиции.

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

Нет похожих вопросов

...