單獨容器中的絕對定位元素重疊

Question

我正在嘗試為項目創建“卡片”。

這些卡的工作方式如下：

默認情況下，每張卡僅顯示3行文本。 單擊“擴展卡”鏈接時，該卡將獲得絕對定位，並且z-index出現在其他元素上並向下打開。

為了防止卡在絕對位置時移動，我將它們分別放在自己的容器中。

這就是我的代碼的本質：（檢查小提琴 ）

HTML：

<div class="cardwrapper">
  <div class="card">
    <img src="http://lorempixel.com/800/800/people/3" />
    <p class="lead">John Doe</p>
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        <br/>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <br/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p> 
    <a class="text-center card-button">extend</a>

  </div>
</div>

CSS：

.cardwrapper {
    width: 40%;
    position: relative;
}
.card {
    width: 100%;
    position: relative;
}


.description {
    position: relative;
    max-height: 3em;
    overflow: hidden;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
}
.description-show .description {
    max-height: 500px;
}
.description-show-position {
    position: absolute !important;
    z-index: 1000 !important;
}

JavaScript / jQuery：

$('.card-button').click(function () {
    var card = $(this).parent();
    var cardWidth = card.css('width');

    if (!card.hasClass('description-show-position')) {
        card.toggleClass('description-show-position');
        card.toggleClass('description-show');
        card.css('width', cardWidth);
    } else {
        card.toggleClass('description-show');
        card.css('width', cardWidth);

        card.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (e) {
            card.toggleClass('description-show-position');
        });
        card.off();
    }
})

我在代碼中找不到問題，但是有時它仍然與卡片下的元素重疊。 您認為會導致什么？

有沒有比使用包裝器更好的方法？

編輯：

我意識到transitionend事件不會觸發。 為什么會這樣呢？

Answer 1

我對您的代碼進行了一些更改，現在看來一切正常（您可以在此處查看： http : //jsfiddle.net/5QaSu/7/

我所做的更改：

• 為cardwrapper類添加了一個高度（如上面的注釋中所指定），以避免折疊說明時出現重疊：

   cardwrapper { width: 40%; position: relative; min-height:330px; } 

• 必須從父級而不是直接從卡調用transitionend事件：

   card.parent().on('transitionend', function (e) { card.toggleClass('description-show-position'); }); 

• 添加了一個centinel變量來控制transitionend僅被調用一次（對不起，必須有一種更好的方法）：

   card.parent().on('transitionend', function (e) { if (transition) { transition = false; card.toggleClass('description-show-position'); } }); 

Answer 2

如何在所有卡上設置絕對位置：card1的top為：0，card2 top為card1的高度，card3 top = card1 + card2等？