css проблема с div - PullRequest
Новая
       4

css проблема с div

1 голос
/ 30 июля 2010

У меня есть немного div.Мне нужно двое детей там.Первый должен находиться в статической позиции и под вторым.

альтернативный текст http://a.imageshack.us/img685/8185/imgpk.png

Оранжевый прямоугольник должен быть расположен относительно родительского элемента div и имеет статическую позицию (например, top: 20px;),Второй дочерний элемент (красный прямоугольник) должен находиться над всеми другими элементами div.

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

Не могли бы вы помочь мне с этим?

UPD 

<div id="content">
      <div id="secondChild"></div>
</div>
<div id="firstChild"></div>

#content
{
    position: absolute;
    width: 100%;
}
#secondChild
{
    z-index: 9999;
}
#firstChild
{
    position: absolute;
    z-index: -1;
}

Ответы [ 2 ]

1 голос
/ 30 июля 2010

Можете ли вы попробовать это? 

<html>
<head>
<style type="text/css"> 
#content
{
   position: absolute;
   height: 300px;
   width: 200px;
   margin-left: 30px;
   background-color: blue;
}
#secondChild
{
   z-index: 9999;
   width: 100%;
}
#firstChild
{
   position: absolute;
   width: 50px;
   height: 50px;
   z-index: -1;
   margin-top: 120px;
   background-color: red;
}
</style>
</head>

<body>
  <div id="content">
     <div id="secondChild">Second Child</div>
  </div>
  <div id="firstChild">First Child</div>
</body>
</html>
0 голосов
/ 30 июля 2010

Z-индекс работает в контексте рендеринга, поэтому в вашем случае его нужно применять к #content, а не ко второму дочернему элементу.Кроме того, он должен уже перекрывать то, что вам нужно, если красный div находится после оранжевого div в потоке страницы.

Жаль, что вы не предоставляете полный (er) источник с полями и т. Д., Так чтоЯ могу попытаться воспроизвести это.

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

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

...