股利根據它不使用底部和頂部的父DIV

這裏是一個的jsfiddle： https://jsfiddle.net/mcgfhL10/股利根據它不使用底部和頂部的父DIV

#description{ /*Just a breif description of the product. */ 
    font-family:"microsoft sans serif"; 
    font-size:22px; 
    position:relative; 
    overflow-y:scroll; 
    bottom:40px; 
    width:400px; 
    height:150px; 
    background:black; 
}

我想與ID description股利下降到div底部id爲shelf。然而，它跌至image的底部，這是一個s？？這是如何工作的？

來源

2016-07-25 CLASSIFIED

與您的代碼的問題是，你的描述是相對定位而你的父母根本沒有定位。這意味着描述基本上不知道它存在於架子內部，而是計算它相對於圖像的位置，這是最接近的元素。（如果您在描述中將底部：40px設置爲0px，您會注意到它將緊貼在圖像下）。

你必須讓孩子成爲絕對的親戚。如果你定位一個子元素的相對位置，然後將子元素的底部設置爲0px，它也不會粘住。你基本上告訴它不要在任何地方移動。（相對平均值相對於其當前中心）。

下面是引用一個演示：jsFiddle Demo

.shelf { 
    position: relative; 
} 
.description { 
    position: absolute; 
}

我強烈建議你在CSS的定位和顯示讀了你再往前走了。如果你很好地瞭解基礎，它將會幫助你很多。
CSS Tricks
A List Apart

來源

2016-07-25 05:01:51 ykadaru

您的描述需要絕對定位，因爲它不是相對於其他元素，而是絕對在父容器內。您還需要在圖像上移動您的描述div。

所以你的HTML變爲：

  <div id="description"><p>foobar</p></div> 
      <img id="image" src = "image.jpg">

和你的CSS除了是：

#description{ 
    position: absolute; 
}

這裏有一個小提琴：https://jsfiddle.net/jgghpcmy/1/

來源

2016-07-25 04:18:50 AliIshaq

它仍然看起來是一樣的我，除了現在它有一個棒球海報。 – CLASSIFIED

我添加了一張海報來測試它。現在描述在圖像的底部，是不是你想要它？ – AliIshaq

說明不在我屏幕上的頁面底部。它看起來對我來說沒有什麼變化。 – CLASSIFIED

股利根據它不使用底部和頂部的父DIV

回答

相關問題