bottom：0;位置：絕對;不工作

Question

我目前正在嘗試製作滑塊，但遇到了在滑塊底部放置div而不是頂部的問題。 div保存有關當前幻燈片的信息。這裏是我的代碼：

#smooth-slider { 
 
\t display: block; 
 
\t position: relative; 
 
\t height: auto; 
 
\t width: 100%; 
 
\t 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 { 
 
\t width: 326px; 
 
\t height: auto; 
 
\t overflow: hidden; 
 
\t 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; 
 
    \t border-bottom: 5px solid #fff; 
 
} 
 
.details:hover{ 
 
\t border-bottom: 5px solid #1e00ff; \t 
 
} 
 
.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{ 
 
\t padding: 20px; 
 
\t font-family: Courier New; 
 
} 
 

 
.details p strong{ 
 
\t font-family: Helvetica; 
 
\t font-weight: normal; 
 
\t font-size: 0.7em; 
 
\t 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"> 
 
\t  <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>

我需要的「細節」 div來總是在div的底部放置在任何時候都像箭頭按鈕，而不是頂部。它不響應底部：0;位置：絕對;以任何方式。有任何想法嗎？

Answer 1

的原因，爲什麼細節DIV不能見底是因爲其祖父<div class="inner">得到由這個轉換崩潰：-webkit-transform: translateZ(0);

Answer 2

您試圖在下面的代碼來定位details股利。

<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說：

如果酒店有勝於無，堆疊環境不同的值將被創建。在這種情況下，對象將作爲位置的包含塊：它包含的固定元素。

現在，在HTML中的<article>以上positioned:static，相對於inner DIV具有height: 0因此，details DIV定位，這就是爲什麼如果你把bottom: 0到details DIV它將被定位在視口上方。

你能做些什麼來解決這個問題是

1. 使文章position:relative，因此將相對它的細節。
2. 從inner div中刪除transform: translateZ(0)。