底部：0；位置：绝对；不工作答案

【问题标题】：bottom: 0; position: absolute; not working底部：0；位置：绝对；不工作
【发布时间】：2017-07-31 09:02:34
【问题描述】：

我目前正在尝试制作滑块，但在将 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>

我需要“详细信息” div 始终像箭头按钮一样放置在 div 的底部，而不是顶部。它不响应底部：0；位置：绝对；以任何方式。有什么想法吗？

【问题讨论】：

<br> 不需要或使用结束斜线。

标签： html css position absolute

【解决方案1】：

details div 不能触底的原因是因为它的祖父<div class="inner"> 被这个转换折叠了：-webkit-transform: translateZ(0);

【讨论】：

【解决方案2】：

您正在尝试在以下代码中定位 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 相对于具有 height: 0 的 inner div 定位，这就是为什么如果你把 bottom: 0 放到details div 它将位于视口上方。

你可以做些什么来解决这个问题

将文章设为position:relative，因此放置与其相关的详细信息。
从inner div 中删除transform: translateZ(0)。

【讨论】：