家長的位置div

我有一些元素，當我們想要顯示一些額外的信息時，他們在上面。我嘗試將我的內容放置在框的底部，然後將其設置在懸停的底部，但取決於內容的數量，它有時仍然可見。家長的位置div

在下面的例子中，我有一個紅框，我想讓黃框從底部開始動畫。現在我可以使用一個像bottom: -9999px這樣的瘋狂值，但是這會導致我的動畫速度問題滑動內容。

.item { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 
.item:hover .item__box { 
 
    bottom: 0; 
 
} 
 
.item__box { 
 
    position: absolute; 
 
    bottom: -100%; 
 
    background: yellow; 
 
    transition: all 300ms; 
 
}

<div class="item"> 
 
    
 
    <br /><br /><br /> 
 
    <p>lorem ipusm</p> 
 
    <br /><br /><br /> 
 
    
 
    <div class="item__box"> 
 
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> 
 
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> 
 
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> 
 
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> 
 
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p> 
 
    </div> 
 
</div>

我怎樣才能確保內容始終是外剛內框的底部，然後很好地向上滑動懸停？

編輯：對不起，爲了清楚起見，在懸停時，我希望黃色內容來自紅色框的底部，因此在頂部仍有紅色的間隙。

來源

2017-08-14 Sam Willis

找到看看[這裏]（https://www.w3schools.com/howto/howto_css_image_overlay.asp），有很多很酷的例子，包括你要找的那個（見[幻燈片]（https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom）） – Ivan

您可以添加transform: translate()以將元素相對於其自己的大小相對於僅使用頂部和底部（相對於父級大小而言）來指定百分比。

通過這種方式，您可以將元素移動到bottom: 0，這是您想要的最終位置（盒子的底部與物品底部對齊），然後將其翻轉100％，這意味着盒子的頂部將是底部的位置。

動畫不會對bottom財產發生，但在transform，這意味着你基本上是移動框的頂部從底線到你那裏底= 0

最終位置

很難解釋，易觀：

.item { 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 
.item__box { 
 
    bottom: 0; /* Bottom of box aligned with bottom of item */ 
 
    /* Starting position: use transform shift the item down by its 
 
    own height, so it is just out of visible range. */ 
 
    transform: translate(0, 100%); 
 

 
    transition: all 300ms; 
 
    position: absolute; 
 
    background: yellow; 
 
} 
 
.item:hover .item__box { 
 
    /* Animation: rather than animate top, animate the translation, so 
 
    it moves up from just out of range to its normal position */ 
 
    transform: translate(0, 0); 
 
}

<div class="item"> 
 
    
 
    <br /><br /><br /> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <br /><br /><br /> 
 
    
 
    <div class="item__box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
 
    <p>This is the end!</p> 
 
    </div> 
 
</div>

就個人而言，我覺得效果更好，當黃框小於紅色的項目。在這種情況下，它會緩慢動畫並粘到底部（當然，其所有內容都可見）。

來源

2017-08-14 10:58:48 GolezTrol

我沒有意識到高度來自父母的高度，這讓我感到困惑。不幸的是，我希望黃箱在被徘徊時被卡在底部，而你的是堅持到頂部。如果你從黃框中刪除一段，那麼你可以看到我的意思。 –

@SamWillis沒有注意到，但是這排除了使用'top'的原始解決方案。我已經改變了使用'translate'而不是'top'的解決方案。我試圖解釋發生了什麼，但這個例子可能比解釋更清晰。;） – GolezTrol

真棒，我從來沒有想過要用翻譯此，感謝 –

如果你只是想顯示懸停的其他內容，你有沒有想過使用手風琴呢？

這可以手動完成，使用javascript，html和css的組合。或者你用預製的插件庫像jQuery UI 這可以在https://jqueryui.com/accordion/

來源

2017-08-14 11:00:25

「簡單地說，jQuery的」。如何加載了簡單的JavaScript的100KB比寫3行CSS的？ – GolezTrol

@GolezTrol，我只是意味着而不是滾動他現在的手風琴。只提供替代解決方案。 –

看起來這裏的用例是一個帶有信息的彈出式提示，例如在圖片上出現一些解釋。 Accordion通常更適合多頁信息，您可以使用accordeon控件選擇正確的頁面。但是，具有一定的創造力，當然你也可以在這裏使用它。 – GolezTrol

家長的位置div

回答

相關問題