css элемент скрыт за фоном

У меня есть эта проблема, когда div не отображается. Код прост и только для тестирования:css элемент скрыт за фоном

<html> 
<head> 
    <title>Main</title> 

    <style> 
     .simple-div { 
      -moz-border-radius: 15px; 
      border-radius: 15px; 
      height: 200px; 
      width: 200px; 
     } 
    </style> 
</head> 
<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;"> 
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"> 

    </div> 

    <div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;"> 

    </div> 

</body> 
</html>

Как сохранить второй div над фоновым изображением? в настоящее время он не отображается на экране, но я вижу, что он подсвечивается за элементом Inspect через хром.

С уважением,

источник

2013-03-12 sys_debug

Мы не можем видеть фоновое изображение в вашем примере, так как оно является локальным для вас –

попробуйте сыграть с 'позицией' и' float' – greener

У вас нет ни одного контента или фона или цветов границы, поэтому нет ничего визуализации. Добавьте 'background: # F00;' в ваш второй div, вы увидите это. Я добавил это как ответ, так как некоторые неправильные пришли .._ – rgthree

Я бы использовал положение: относительное или положение: абсолютное, с индексом z на обоих div.

<div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index: 0; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"> 
</div> 

<div style="-moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px; position: relative; top: 0; left: 0; z-index: 15; background-color:#ff0000;"> 
    test 
</div>

источник

2013-03-12 21:07:29

добавить position: relative и z-index: 9999; в DIV, который вы хотите видеть на вершине.

источник

2013-03-12 21:06:47

может быть просто z -индекс: 1 для начала? –

Да, я просто бросил большое количество, чтобы убедиться. Но начните с одного. –

Используя большое количество, убедитесь, что следующий человек должен использовать большее число :) – GregRos

Ваш второй div не содержит содержимого, фона, границы и т. Д., Поэтому на экране ничего не видно. Это там, и это на фоне вашего тела.

Если вы также намерены показать его поверх своего фиксированного элемента выше, вам нужно, чтобы он был выше z-index. Вы должны дать ему position, что не static для того, чтобы использовать z-index (здесь мы будем использовать relative):

<body style="background:url('backgrounds/cupcakeBG.jpg') 50% -105px repeat;"> 
    <div style="background: #C8BBBE; top:0px; left:0px; width:100%; height:70px; position: fixed; z-index:1; -moz-border-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"> 

    </div> 

    <div style="background:#F00; position:relative; z-index:2; -moz-border-radius: 15px; border-radius: 15px; height: 200px; width: 200px;"> 

    </div> 

</body>

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

источник

2013-03-12 21:08:54 rgthree

Один из вариантов в зависимости от вашей цели - добавить position:absolute к атрибуту стиля второго div.

источник

2013-03-12 21:12:53

css элемент скрыт за фоном

ответ

Смежные вопросы