我可以让一个绝对定位的 div 堆栈留在流程中吗？答案

【问题标题】：Can I make an absolutely positioned stack of divs stay in the flow?我可以让一个绝对定位的 div 堆栈留在流程中吗？
【发布时间】：2014-05-15 23:20:41
【问题描述】：

我正在制作一个简单的 jquery 幻灯片，它可以改变绝对重叠的 div 的不透明度。我的问题是因为它们是绝对定位的，它们不再在流程中，但我需要它们。所以我需要三件事之一。

找到一种不使用绝对位置来堆叠 div 的方法。或

找到一种将绝对定位的 div 放回流程中的方法。或

想办法在不使用堆叠 div 的情况下制作幻灯片。

html:

<body>
I come before<br />
<div id="box_foot">
  <div id="tests">
    <div class="testimony" style="opacity: 1;">
      <div class="bluequote">One</div>
    </div>
    <div class="testimony">
        <div class="bluequote">Multiple lines<br />Multiple lines<br /></div>
    </div>
    <div class="testimony">
      <div class="bluequote">Two</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Three</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Four</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Five</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Six</div>
    </div>
    <div class="testimony">
      <div class="bluequote">Seven</div>
    </div>
  </div>
</div>
I come after<br />
</body>

css:

#box_foot .testimony {
    position:absolute;
    opacity:0;
}

幻灯片功能：

$(document).ready(function(){
    var count = 1;
    var $slides = $('.testimony');
    var speed = 1000;

    setInterval(rotQuote,speed);

    function rotQuote(){    
        if(count < $slides.length){
            $('.testimony:nth-child(' + count + ')').animate({opacity:0},1000);
            count++;
            $('.testimony:nth-child(' + count + ')').animate({opacity:1}, 1000);
        } else {
            $('.testimony:nth-child(' + count + ')').animate({opacity:0}, 1000);
            count = 1;
            $('.testimony:nth-child(' + count + ')').animate({opacity:1}, 1000);
        }
    }

    });

http://jsfiddle.net/P48yA/

我可以设置一个固定的高度，但这不允许布局/响应的灵活性。

【问题讨论】：

标签： jquery html css

【解决方案1】：

更新！

为什么不应用 CSS 类和动画？

这将元素保留为文档流的一部分 - 只是在它们没有被“显示”时将它们压缩为空

Demo Fiddle

#box_foot .testimony {
    position:relative;
    opacity:0;
    height:0;
    width:0;
    overflow:hidden;
    transition:opacity 1s ease-in;
}
#box_foot .testimony.show {
    height:auto;
    width:auto;
    -webkit-animation:fader 1s ease-in;
    animation:fader 1s ease-in;
}
@keyframes fader {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@-webkit-keyframes fader {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

调整后的 jQuery：

$(document).ready(function () {
    var count = 1;
    var $slides = $('.testimony');
    var speed = 1000;

    setInterval(rotQuote, speed);

    function rotQuote() {
        if (count < $slides.length) {
            $('.testimony:nth-child(' + count + ')').removeClass('show');
            count++;
            $('.testimony:nth-child(' + count + ')').addClass('show');
        } else {
            $('.testimony:nth-child(' + count + ')').removeClass('show');
            count = 1;
            $('.testimony:nth-child(' + count + ')').addClass('show');
        }
    }

});

【讨论】：

【解决方案2】：

您可以使绝对定位的 div 的父容器具有position: relative;，这将使它们绝对从父容器的左上角而不是主体定位，然后只需给父 div 一个足够大的固定高度显示所有 div 内容，这将解决问题。它将是响应式的，因为父容器将在流中，并且淡入和淡出的 div 将相对于父容器定位。

【讨论】：