Css：根据容器底部相对于容器顶部定位元素

Question

我有一个高度可变的 div 元素，我需要根据它相对于容器顶部的 bottom 来定位它。

这必须在不更改 html 的情况下完成。

例如

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

h1 的底部应比 #container 的顶部低 100 像素。

非常感谢

编辑：

所以根据请求我做了（或没有）尝试的事情：

正在使用 Google 搜索 css bottom top position relative 但这不是世界上最好的搜索词...
通常我会在 h1 周围放一个容器，并给它一个 100px 的高度，但是我需要更改 html 而我不能
使用 bottom: somevalue 但这会使元素的底部相对于容器的底部。
杀死一些吸血鬼

Answer 1

当您将 margin-top: 100px 应用于 h1 时，您可以使用 transform: translateY(-100%) 使元素的底部相对。

#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: absolute;
    height: 100px;
    bottom:0px;
}

此代码根本不会影响 html。我为 id-container 添加了 css。绝对位置元素相对于具有非静态位置的第一个父元素定位。您可以将其更改为您想要的修复它。

容器的高度，帮助您计算距底部的间距。

Answer 3

除非您想使用某些浏览器尚不支持的 calc，否则唯一的方法是为 h1 添加高度。然后将您的上边距设置为 top: 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/

Answer 4

取决于浏览器支持要求：

#container {
    position: relative;
}

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

Example

Css：根据容器底部相对于容器顶部定位元素

Css: Position element by it's bottom relative to it's container's top

html

css

position