我目前正在尝试制作滑块但是在滑块底部而不是顶部放置div时出现问题。 div正在保存有关当前幻灯片的信息。这是我的代码：
#smooth-slider {
display: block;
position: relative;
height: auto;
width: 100%;
margin-bottom: -5px;
}
#smooth-slider input {
display: none;
}
#smooth-slider label, a {
color: #ef023f;
cursor: pointer;
text-decoration: none;
}
#smooth-slider label:hover {
color: #ff0042 !important;
}
#slide1:checked ~ #smooth-slides .inner { margin-left:0; }
#slide2:checked ~ #smooth-slides .inner { margin-left:-100%; }
#slide3:checked ~ #smooth-slides .inner { margin-left:-200%; }
#slide4:checked ~ #smooth-slides .inner { margin-left:-300%; }
#slide5:checked ~ #smooth-slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#smooth-slides article img {
width: 100% !important;
}
#smooth-slides .inner {
width: 500%;
line-height: 0;
}
#smooth-slides article {
width: 20%;
float: left;
}
#controls {
margin: -8% 0 0 84%;
width: 15%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
display: inline-block;
width: 10px;
height: 10px;
background: #f89e67;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('http://4.bp.blogspot.com/-UIZu65eikkQ/VZ34eU1MJwI/AAAAAAAAAIY/vwJyNNu8Cdg/s1600/next.png') no-repeat;
float: right;
margin: 0 10px 0 0;
display: block;
background-color:#ef023f;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('http://2.bp.blogspot.com/-5CImAKrafOY/VZ34euMhR9I/AAAAAAAAAIc/5gpYLrn6Ns0/s1600/prev.png') no-repeat;
float: left;
margin: 0 0 0 -17px;
display: block;
background-color:#ef023f;
}
/* Description Box */
.details {
width: 326px;
height: auto;
overflow: hidden;
display: block;
color: #000;
line-height: 20px;
opacity: 1 !important;
position: absolute;
background: #fff;
text-align: left;
overflow-wrap: break-word;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-bottom: 5px solid #fff;
}
.details:hover{
border-bottom: 5px solid #1e00ff;
}
.details h3 {
color: #000;
margin: 0 0 5px;
font-weight: normal;
font-size: 16px;
font-style: normal;
background: none repeat scroll 0 0 transparent;
padding: 5px;
}
.details p{
padding: 20px;
font-family: Courier New;
}
.details p strong{
font-family: Helvetica;
font-weight: normal;
font-size: 0.7em;
display: block;
}
/* slider Styling */
#smooth-slides {
margin: 0px 0 0;
padding: 0%;
background: transparent;
border:0px #222222 solid;
width:100%;
height:100%;
}
#smooth-slides article img {
width:100%;
height:auto;
}
/* Animation */
#smooth-slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#smooth-slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #smooth-slides article:nth-child(1) .details,
#slide2:checked ~ #smooth-slides article:nth-child(2) .details,
#slide3:checked ~ #smooth-slides article:nth-child(3) .details,
#slide4:checked ~ #smooth-slides article:nth-child(4) .details,
#slide5:checked ~ #smooth-slides article:nth-child(5) .details {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
/*Responsive Style */
@media screen and (max-width: 960px) {
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4){
margin: 0 0 0 -50px;
float:left;
}
}
@media screen and (max-width: 768px){
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4){
margin: 0 0 0 -50px;
float:left;;
}
}
@media screen and (max-width: 620px){
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4){
margin: 0 0 0 -70px;
float:left;
}
}
@media screen and (max-width: 420px){
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4){
margin: 0 0 0 -80px;
float:left;
}
#smooth-slides article img {
height:280px;
}
}
@media screen and (max-width: 320px){
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4){
margin: 0 0 0 -80px;
float:left;
}
#smooth-slides article img {
height:220px;
}
}<div class="container">
<article id="smooth-slider">
<input checked="checked" name="smooth-slider" id="slide1" type="radio">
<input name="smooth-slider" id="slide2" type="radio">
<input name="smooth-slider" id="slide3" type="radio">
<input name="smooth-slider" id="slide4" type="radio">
<input name="smooth-slider" id="slide5" type="radio">
<div id="smooth-slides">
<div id="overflow">
<div class="inner">
<article>
<div class="details">
<p>
<strong>Release</strong>
<br />Yeezy 350 Boost
<br />350 Euro</p>
</div>
<a href="LINK 1"><img src="http://luca.mondieu.nu/pharma/wp-content/uploads/2017/07/news-1.jpg"> </a>
</article>
<article>
<div class="details"><h3>DESCRIPTION 2</h3></div>
<a href="LINK 2"><img src=""> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 3</h3></div>
<a href="LINK 3"><img src="IMAGE 3"> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 4</h3></div>
<a href="LINK 4"><img src="IMAGE 4"> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 5</h3></div>
<a href="LINK 5"><img src="IMAGE 5"> </a></article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</article>
</div>
我需要＆＃34;详细信息＆＃34; div始终始终位于div的底部，如箭头按钮，而不是顶部。它不响应底部：0;位置：绝对;以任何方式。有什么想法吗？
答案 0 :(得分：1)
原因，为什么细节div无法触底，因为它的祖父母<div class="inner">因此转变而崩溃：-webkit-transform: translateZ(0);
答案 1 :(得分：0)
您正尝试将details div放在以下代码中。
<div class="inner">
<article>
<div class="details">
...
</div>
...
但是使用这个选择器
#smooth-slides .inner {
-webkit-transform: translateZ(0);
}
您更改了默认transformZ值，如https://developer.mozilla.org/en-US/docs/Web/CSS/transform中所述：
如果属性的值不是none，则将创建堆叠上下文。在这种情况下，对象将充当位置的包含块：它包含的固定元素。
现在，上面html中的<article>为positioned:static，因此，details div相对于inner div，其中height: 0和{这就是为什么如果你将bottom: 0放到details div，它将位于视口上方。
你可以做些什么来解决这个问题
position:relative，因此请将相关详细信息放在其中。transform: translateZ(0) div。inner