Как изображение, которое «всплывает», перекрывает другой div?

-1

Я сделал веб-приложение с Spring MVC, Hibernate и т. Д., Но мой вопрос относится к классу css. Я нашел классную галерею картинок, которую я хотел использовать (http://alpatriott.ru/works/album/album-mod.html). Пока что так хорошо, я его реализовал, только картинка не перекрывает нижний div. Я покажу скриншот, чтобы уточнить .. Может ли кто-нибудь рассказать мне, как это решить?Как изображение, которое «всплывает», перекрывает другой div?

Если требуется какой-либо код, скажите мне, и я отправлю его

enter image description here

КОД: СПЯ:

<html> 
<head> 
    <title>${album.description}</title> 
</head> 
<body> 
<div id="container"> 
    <div id="content"> 
     <div class="gallery"> 
      <c:forEach items="${album.pictures}" var="picture"> 
        <a tabindex="1"> 
         <img src="<c:url value='/picture/${picture.id}'/>" alt="description" title="${picture.description}" /> 
        </a> 
      </c:forEach> 
      <span class="closed">+</span> 
      <span class="closed-layer"></span> 
     </div> 
    </div> 
</div> 
</body> 
</html>

CSS: стиль

#container { 
    height: 62%; 
    width: 100%; 
    float: left; 
    background-color: #A9E2F3; 
    overflow-x: auto; 
} 

#container #content { 
    height: 87%; 
    margin: 20px 30px; 
    padding: 15px 0 0 5px; 
    overflow-y: auto; 
    position: relative; 
}

IMG :

.gallery { 
    position: relative; 
    z-index: 2; 
} 

.gallery a{ 
    display:inline-block; 
    width:200px; 
    height:141px; 
    position:relative; 
    border:5px solid #fff; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 


.gallery a img{ 
    display:block; 
    width:100%; 
    height:100%; 
    -webkit-transition-property:width, height, top, bottom, left, right, z-index; 
    -webkit-transition-duration:300ms; 
    -moz-transition-property:width, height, top, bottom, left, right, z-index; 
    -moz-transition-duration:300ms; 
    -o-transition-property:width, height, top, bottom, left, right, z-index; 
    -o-transition-duration:300ms; 
    transition-property:width, height, top, bottom, left, right, z-index; 
    transition-duration:300ms; 
    position:relative; 
    z-index:2; 
    top:0px; 
    left:0px; 
    cursor:pointer; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    user-select: none; 
} 


.gallery a:focus img{ 
    width:250%; 
    height:250%; 
    display: block; 
    position:absolute; 
    box-shadow:0 0 15px 2px #000; 
    -moz-box-shadow:0 0 15px 2px #000; 
    -webkit-box-shadow:0 0 15px 2px #000; 
    -webkit-transition-property:width, height, top, bottom, left, right, z-index; 
    -webkit-transition-duration:2s; 
    -moz-transition-property:width, height, top, bottom, left, right, z-index; 
    -moz-transition-duration:2s; 
    -o-transition-property:width, height, top, bottom, left, right, z-index; 
    -o-transition-duration:2s; 
    transition-property:width, height, top, bottom, left, right, z-index; 
    transition-duration:2s; 
    cursor:default; 
    z-index:25; 
}

Я использую декоратор для страницы .. Скажите, если этого недостаточно!

источник

2014-01-26 Davey

Да, код почти всегда требуется. –

Добавлен код .. любые идеи? – Davey

Поместите высокий индекс z, например 999 или более, в стиль изображения. Это должно сработать.

источник

2014-01-26 20:00:30

Не работает для меня .. – Davey

OK. Понимаю. Попытайтесь поместить некоторый запас в класс галереи. Или более заполнение идентификатора содержимого. –

did not work ... любые другие предложения? – Davey

Как изображение, которое «всплывает», перекрывает другой div?

ответ

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