Css:位置元素相对于它的容器顶部的底部

时间:2015-01-16 21:49:19

标签: html css position

我有一个div元素,其高度可变,我需要相对于容器顶部定位bottom

必须在不更改html的情况下完成此操作。

e.g。

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

h1的底部应该比#container的顶部低100px。

非常感谢

编辑:

因此,通过请求我做了(或没有尝试过):

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

4 个答案:

答案 0 :(得分:10)

您可以使用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>

答案 1 :(得分:5)

取决于浏览器支持要求:

#container {
    position: relative;
}

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

Example

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

除非您想使用某些浏览器尚不支持的calc,否则只能通过它添加高度到h1。然后将您的上边距设置为顶部: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/