是否有 css min-top 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15552358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a css min-top property
提问by Thanos Darkadakis
Is there any css property like min-height, but for top? In the example below, when i hide div1 (via javascript), i want div2 to have top:50. Else, to be placed below div1.
有没有像 min-height 这样的 css 属性，但是对于 top？在下面的示例中，当我隐藏 div1（通过 javascript）时，我希望 div2 具有 top:50。否则，将放置在 div1 下方。
<html>
<head>
<style>
#div1
{
height:100px;
}
#div2{
//min-top:50px;
}
</style>
</head>
<body>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</body>
</html>
Edit: as i answered below
编辑：正如我在下面回答的那样
When div1 is not hidden i want div2 to be exactly below div1. imagine div1 as a treeview which can have any height (or even be hidden) and div2 as a paragraph which should always be below 50px
当 div1 未隐藏时，我希望 div2 正好低于 div1。把 div1 想象成一个可以有任何高度（甚至可以隐藏）的树视图，把 div2 想象成一个应该始终低于 50px 的段落
采纳答案by Thanos Darkadakis
I see that this question has still many views and people are still commenting. Because of the fact that the question is not fully answered, i decided to write here the complete answer:
我看到这个问题还有很多观点，人们还在评论。由于问题没有完全回答，我决定在这里写下完整的答案：
Appropriate css:
合适的css：
#div1 {
min-height:50px;
background-color: #fee;
margin-bottom:-50px;
}
#div2 {
margin-top:50px;
background-color: #efe
}
http://jsfiddle.net/vVsAn/5051/
http://jsfiddle.net/vVsAn/5051/
Results
结果
- When div1 is hidden, div2 has a top property of 50px
- When div1 is not hidden:
- If div1 height is less than 50px, then div2 is placed at 50px
- If div1 height is more than 50px, then div2 is placed right under div1
- 当div1隐藏时，div2的top属性为50px
- 当 div1 未隐藏时：
- 如果 div1 高度小于 50px，则 div2 放置在 50px
- 如果 div1 高度大于 50px，则 div2 放在 div1 正下方
回答by JRT
I came up with this solution which utilises the top:0 bottom:0 hack.
我想出了这个利用 top:0 bottom:0 hack 的解决方案。
We create a container the height of it's relative parent (if any) - we then give this a min-height (eg your min-top)
我们创建一个容器，它的高度为它的相对父级（如果有） - 然后我们给它一个最小高度（例如你的最小顶部）
We then position the actual element absolutely to the bottom on this container.
然后我们将实际元素绝对定位到此容器的底部。
CSS:
CSS：
.container {
position:absolute;
bottom:0px;
top: 0;
min-height: 700px; //Adjust this to your MINIMUM (eg your min-top)
}
.position-me {
position: absolute;
bottom: 0;
}
HTML:
HTML：
<div class="container">
<div class="position-me">Great!</div>
</div>
回答by Mr. Alien
No there's nothing like min-top
不，没有什么像 min-top
Instead you can use is
相反，您可以使用是
div {
position: relative;
top: 50px;
}
And for the example you shown visibility: hidden;will be best suited here, as it will reserve the space of your hidden div
对于您显示的示例，visibility: hidden;这里最适合，因为它将保留隐藏的空间div
回答by xpy
I suspect that this will do the trick for you but I believe it is not a very good practice:
我怀疑这对你有用，但我相信这不是一个很好的做法：
#div1
{
height:100px;
outline: 1px solid red;
margin-bottom:-50px;
}
#div2{
margin-top:50px;
outline: 1px solid blue;
}
DEMO: http://jsfiddle.net/pavloschris/tbbvU/
演示：http: //jsfiddle.net/pavloschris/tbbvU/
( Just comment/uncomment the display:noneto see it work.)
（只需注释/取消注释display:none即可看到它的工作。）
回答by Ahmed Kamal
$(window).on("resize", function () {
if ($('#div1').css('display', 'none')){
$("#div2").addClass('minTop');
} else if ($('#div1').css('display', 'block')){
$("#div2").removeClass('minTop');
}
}).resize();#div1{
width:100px;
height:100px;
background-color:#ff0000;
position:absolute;
display:block;
/* display:none; */
}
#div2{
width:100px;
background-color:#ffff00;
top:150px;
position:absolute;
}
#div2.minTop{
top:50px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='div1'>div 1</div>
<div id='div2'>div 2</div>
</body>
</html>