[英]Css: Position element by it's bottom relative to it's container's top
我有一个可变高度的div
元素,我需要通过它相对于容器顶部的bottom
来定位。
必须在不更改html的情况下完成此操作。
例如
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1
的底部应该比#container
的顶部低100px。
非常感谢
编辑:
所以通过请求我做了(或没有)尝试过:
css bottom top position relative
但这不是世界上最好的搜索字词... h1
周围放一个容器,并给它一个100px的高度,但后来我需要改变html,我不能 bottom: somevalue
但是将元素的底部相对于容器的底部定位。 你可以使用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>
根据浏览器支持要求:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
这段代码根本不影响html。 我为id-container添加了css。 绝对位置元素相对于具有静态位置的第一父元素定位。 您可以将其更改为您想要的固定。
容器的高度,帮助您从底部计算间距。
只有通过它才能为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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.