У меня есть картинная галерея скользящих изображений в формате только с css. См. http://codepen.io/anon/pen/xmhzE?editors=110 для примера или прилагаемого кода.
Он отлично работает, пока #images
-div не имеет overflow: hidden
. Когда переполнение установлено в скрытое, абсолютное позиционирование отдельных изображений больше не работает. Когда я использую отрицательные значения для left
-property изображений, он также работает с скрытым переполнением.
Изменяет ли стиль overflow:hidden
способ отображения абсолютных детей?
У кого-нибудь есть решение этой проблемы?
Источники
index.html
<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
</div>
base.css:
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
/*overflow: hidden; if this is set absolute positioning of images breaks*/
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}