1. дома
  2. Вопрос и ответ
  3. CSS позиционирование

CSS позиционирование

2015-02-02 6 views
1

У меня есть заголовок в верхней части, которая содержит следующее правило CSS:CSS позиционирование

position: fixed;

У меня также есть некоторые изображения, которые держат (и нужно держать) следующее правило CSS:

position: relative;

Проблема в том, что мой заголовок всегда сидит в верхней части страницы, когда пользователь прокручивает, но когда они добираются до изображения (с положением: относительный), это находится поверх моего заголовка. Но заголовок всегда должен быть сверху. Есть ли другое правило CSS, которое я могу применить, чтобы это произошло?

источник

2015-02-02 user3217495

+1

Можете ли вы создать [MCVE] (http://stackoverflow.com/help/mcve)? Это помогает установить контекст, поскольку я подозреваю, что проблема возникает из-за [stacking context] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context). – Terry

+0

Эта проблема может быть с z-index дать ur header z-index: 999999999 –

ответ

0

Эта проблема может быть с г-индекса дают ур заголовок г-индекс: 999999999

источник

2015-02-02 05:32:35

0

Просто установите в CSS Z-индекс: 9999 в DIV заголовка

источник

2015-02-02 05:32:19 X9DESIGN

0

в вашем заголовке CSS добавить Z-индекс свойства

с

z-index:10 // can be any number but should be greater than the z-index of image

в CSS изображения добавить

z-index:5; //should be less than the z-index of header

источник

2015-02-02 05:32:54 eLemEnt

0

Нет необходимости устанавливать позицию как относительную или абсолютную ... надеюсь, что это вам поможет.

<html> 
 
\t <head> 
 
\t \t <title>Document Edit</title> 
 
\t </head> 
 
\t <style type="text/css"> 
 
\t \t body{ 
 
\t \t \t padding: 0px; 
 
\t \t \t margin:0px; 
 
\t \t } 
 
\t \t .wrap{ 
 
\t \t \t width:100%; 
 
\t \t \t height: 1500px; 
 
\t \t \t background-color: #DDD; 
 
\t \t } 
 
\t \t .header{ 
 
\t \t \t width: 100%; 
 
\t \t \t height: 60px; 
 
\t \t \t background-color: #004080; 
 
\t \t \t position: fixed; 
 
\t \t } 
 
\t \t .imgdiv{ 
 
\t \t \t width:400px; 
 
\t \t \t height: 400px; 
 
\t \t \t float: left; 
 
\t \t \t background-color: green; 
 
\t \t } 
 
\t </style> 
 
\t <body> 
 
\t \t <div class="wrap"> 
 
\t \t \t <div class="header"></div> 
 
\t \t \t <div class="imgdiv"><img src="error1.png" width="400" height="400"></div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

источник

2015-02-02 05:46:06

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

  • Нет связанных вопросов^_^