Как разместить элемент поверх другого элемента? - PullRequest
Новая
       13

Как разместить элемент поверх другого элемента?

9 голосов
/ 29 марта 2012

У меня есть меню и окно поиска. Я хотел бы поставить окно поиска вместе с пунктами меню. Но мое меню создается в другом файле в div, называемом «custommenu», который использует следующий css: 

#custommenu {
  position:relative;
  z-index:999;
  font-size: 14px;
  margin: 0 auto;
  padding: 10px 16px;
  width: 918px;
  background-color: #FB0A51; 
  border-top-left-radius: 10px 10px; 
  -moz-border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px; 
  -moz-border-top-right-radius: 10px 10px;
}

В то время как у меня есть окно поиска в отдельном файле, который выглядит следующим образом: 

 <div class="header">
   some code
   <div class="quick-access">
      some code
   <php echo $this->getChildHtml('topSearch') ?>;
   </div>
 </div>

Я попытался добавить следующее в файл css, чтобы окно поиска появилось в верхней части меню, но оно не сработало 

 .header .form-search { 
   position:absolute; 
   right:29px;  
   z-index:1000; 
   top: 80px;  
   width:315px;  
   height:30px;  
   padding:1px 0 0 16px; 
 }

Тем не менее окно поиска скрывается за меню. Я хотел бы иметь окно поиска в меню. Как мне это сделать?

РЕДАКТИРОВАТЬ: Вот CSS-файл div, который содержит окно поиска, 

 .header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
 .header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
 .header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }

И вот как это выглядит прямо сейчас, (фиолетовые ссылки - быстрый доступ, белый прямоугольник - это поиск, который идет за розовой областью 'custommenu'. Я хотел бы, чтобы белый прямоугольник находился на розовой области. И все это внутри заголовка)

z-index issue o/p

Ответы [ 4 ]

6 голосов
/ 03 апреля 2012

@ все

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

Код выглядит сейчас 

.header{ position: relative; z-index: 4000; }
 .header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}

Это отлично выровняло мое окно поиска в верхней части моего меню. Еще раз спасибо всем, кто помог. Цени это.

1 голос
/ 29 марта 2012

Попробуйте с float? или display:block;
Если бы я использовал этот код, я бы написал css так: 

position:relative;
left:some value;
top:some value;
Z-index: -999
0 голосов
/ 29 марта 2012

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

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

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

0 голосов
/ 29 марта 2012

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

...