z-index не активен

У меня есть небольшой пример, с двумя смежными divs с фоновым изображением. Эти divs являются фрагментами в редакторе на основе плитки. Я хочу поместить изображение в первый div и изменить положение изображения, чтобы изображение перекрывало оба divs (см. http://jsfiddle.net/WRZJe/16/). Я установил z-index для всех div, и я установил z-индекс изображения. Атрибут позиции для обоих, дивы и изображения установлен в абсолютной:z-index не активен

<body id="exploration-body"> 
    <div class="dungeon-container" style="left: 1040px; top: 720px;"> 
     <div class="dungeon-canvas-full-screen" id="dungeon_canvas"> 
      <div style="top: -720px; left: -1040px; 
        background-position: -82px -162px;" class="show-tile"> 
       <img id="token-1" class="token-img"   
        src="1.png" alt="token1" style="top: 0px; left: 40px"> 
      </div>    
      <div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile"> 
      </div>    
     </div> 
    </div> 
</body>

Вот соответствующий CSS-код:

.dungeon-container { 
    position: absolute; 
} 

.show-tile { 
    background-image: url("stone_dungeon.png"); 
    height: 80px; 
    width: 80px; 
    position: absolute; 
    z-index: 5; 
} 

.token-img { 
    position: absolute; 
    z-index: 50; 
}

Как г-индекс изображений выше, то обе дивы, Я ожидаю, что изображение будет обращено перед обоими div. Но страница ведет себя как без z-индексов, где дано. Изображение скрывается за вторым div и будет перед каждым div перед изображением, содержащим div.

Что может вызвать браузер (я тестировал Safari и FF), чтобы игнорировать данный z-индекс?

Обновление: я добавил скриншот из реального приложения (http://robitzki.de/zindex.png), который показывает, что изображение перемещается за этими div, которые помещаются после содержащего div.

источник

2013-03-01 Torsten Robitzki

Каждый div.show-tile (которые все siblings) создает собственный контекст стекирования! Элементы дочернего элемента остаются в контексте стекирования родителя, поэтому ваш img будет скрыт, если он смежн с div, который имеет более высокий z-индекс в качестве родительского div изображений. Z-индекс самого изображения (= ребенок) не имеет значения в этом случае.

Для того, чтобы иметь изображение перекрывает все дивы, чистейшее решение будет не поставить его в один из див, но поставить его отдельно как собрат вашего .show-tile дивы и дать ему самую высокую Z- индекс.

В качестве альтернативы, вы можете опустить свое абсолютное позиционирование на divs - это сделало бы img, имея его положение в зависимости от #dungeon_canvas.

Если вы не можете этого сделать, вы должны заверить, что div, который содержит ваше изображение, всегда имеет самый высокий индекс z.

источник

2013-03-01 10:35:22 Christoph

Спасибо, ваше объяснение очень помогло. Я думаю, что добавление немного к z-индексу изображения, содержащего div, может быть жизнеспособным решением. –

Вы должны поставить второй DIV перед первым, так что речь идет до IMG тега

<body id="exploration-body"> 
    <div class="dungeon-container" style="left: 1040px; top: 720px;"> 
     <div class="dungeon-canvas-full-screen" id="dungeon_canvas"> 
      <div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile"> 
      </div>    
      <div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile"> 
       <img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: 0px; left: 40px"> 
      </div>    
     </div> 
    </div> 
</body>

http://jsfiddle.net/WRZJe/17

Если вы можете переместить теги IMG из дивы и расположить их с помощью аналогичные координаты к дивам, то следующие будут производить нужный экран

<body id="exploration-body"> 
    <div class="dungeon-container" style="left: 1040px; top: 720px;"> 
     <div class="dungeon-canvas-full-screen" id="dungeon_canvas"> 
      <img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -1000px" /> 
      <img id="token-2" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -930px" /> 
      <div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile"> 
      </div>    
      <div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile"> 
      </div>    
     </div> 
    </div> 
</body>

http://jsfiddle.net/WRZJe/20

источник

2013-03-01 10:11:31

Это решает проблему примера, а не факт, что z-индекс игнорируется. Что делать, если я хотел бы поместить изображение в первый div и захочу наложить его на оба div? Но спасибо, что посмотрели на это! :-) –

Поскольку редактор основан на плитке, это делает изменение размера всей карты очень удобным. Реальная проблема возникает только при перетаскивании маркера на карту на другую плиту. Обходной путь, который я реализую (если я не нахожу решение), заключается в перемещении изображения из исходного div в контейнер div (с соответствующим исправлением положения), когда пользователь начинает перетаскивать токен, а затем переместить токен в target div, когда пользователь бросает токен. –

Поскольку второй .show-tile имеет более высокую z-index, чем изображение, изображение будет обрезано

попробовать это:

.dungeon-container { 
    position: absolute; 
} 

.show-tile { 
    background-image: url("stone_dungeon.png"); 
    height: 80px; 
    width: 80px; 
    position: absolute; 
    /*z-index: 5;*/ 
} 

.token-img { 
    position: absolute; 
    z-index: 1; 
}

Check fiddle, чтобы увидеть его работу

источник

2013-03-01 10:30:20 Mark

Это работает, но я не понимаю, почему это работает. Z-index .token-img в моем примере был 50, а z-index .show-tile - 5, поэтому я думал, что .token-img должен быть ближе к экрану и, таким образом, перед .show-tile , Что мне не хватает? –

Поскольку вторая .show-tile имеет более высокий индекс z, чем изображение, изображение будет обрезано – Mark

@Mark вторая .show-tile имеет z-индекс 5, а изображение было z-index 50, поэтому изображение обладал самым высоким свойством z-индекса. – Wilq

Теперь легко сделать это как как этот Live Demo

код Html

<div class="main-container"> 
    <div class="pic-1 pic-5"></div> 
    <div class="pic-1 pic-3"></div> 
    <div class="pic-1 pic-2"></div> 
    <div class="pic-1 pic-4"></div> 
    <img src="http://dungeonpilot.com/assets/tokens/1.png" alt="" class="pic-change"> 
</div>

Css

.pic-1 { 
    background-image: url("http://dungeonpilot.com/assets/stone_dungeon.png"); 
    height: 80px; 
    width: 80px; 
    float:left; 
    position:relative; 
    background-position: -3px -3px; 
} 
.pic-2{ 
    clear:left; 
} 
.pic-change{ 
    position:absolute; 
    left:40px; 
    top:40px; 
    z-index:3; 
} 
.main-container{ 
    position:relative; 

} 
.pic-4{ 
    z-index:4; 

}

Demo

источник

2013-03-01 10:37:07

z-index не активен

ответ

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