Css：位置元素相對於它的容器頂部的底部

Question

我有一個可變高度的div元素，我需要通過它相對於容器頂部的bottom來定位。

必須在不更改html的情況下完成此操作。

例如

<div id="container">
    <h1>Some Text<br/>more...</h1>
</div>

h1的底部應該比#container的頂部低100px。

非常感謝

編輯：

所以通過請求我做了（或沒有）嘗試過：

• 使用Google搜索css bottom top position relative但這不是世界上最好的搜索字詞...
• 通常情況下，我會在h1周圍放一個容器，並給它一個100px的高度，但后來我需要改變html，我不能
• 使用bottom: somevalue但是將元素的底部相對於容器的底部定位。
• 殺了一些吸血鬼

Answer 1

你可以使用transform: translateY(-100%) ，當你應用margin-top: 100px到h1時，使元素的底部相對。

 #container { width: 200px; height: 200px; background: tan; overflow: hidden; } #container h1 { transform: translateY(-100%); margin-top: 100px; background: papayawhip } 

 <div id="container"> <h1>Some Text<br/>more...</h1> </div> 

Answer 2

根據瀏覽器支持要求：

#container {
    position: relative;
}

#container h1 {
    position: absolute;
    bottom: calc(100% - 100px);
}

例

Answer 3

#container
{
    position: absolute;
    height: 100px;
    bottom:0px;
}

這段代碼根本不影響html。 我為id-container添加了css。 絕對位置元素相對於具有靜態位置的第一父元素定位。 您可以將其更改為您想要的固定。

容器的高度，幫助您從底部計算間距。

Answer 4

只有通過它才能為h1添加一個高度，除非你想使用某些瀏覽器尚不支持的calc。 然后將您的上邊距設置為頂部：100px - h1的高度。 希望這有效

<div id="container">
  <h1>Some Text<br/>more...</h1>
</div>

#container {
  width: 300px;
  height: 300px;
  background: #222;
  overflow: hidden;
}
#container h1 {
  background: #444;
  position:relative;
  height:80px;
  top:20px;
}

http://jsfiddle.net/ms889w57/