这是在最新的Chrome上。 如果网页上的一个元素展开或收缩，它就会向下展开或收缩，并将下面的元素向下推。 唯一的例外是，如果页面滚动到底部，元素收缩，在这种情况下，视口顶部的元素会向下移动。
我想定义一个元素，如果它改变了高度，它会向上移动，而它下面的任何元素都不会移动。
这不是一个处于固定位置的元素。 它处于正常流中，在调整大小时可能在屏幕上的任何位置。
用例是一个影响上面元素的表单，我不希望表单在填写时弹来弹去。
一些非常简单的代码-
HTML:
<div class="topdiv">
Top
</div>
<div class="bottomdiv">
Bottom
</div>
和随附CSS:
.topdiv {
width: 400px;
height: 100px;
margin: 10px;
background-color: red;
}
.topdiv:hover {
height: 300px;
}
.bottomdiv {
width: 400px;
height: 100px;
margin: 10px;
background-color: green;
}
.bottomdiv:hover {
height: 300px;
}
在此小提琴:https://jsfiddle.net/vbrdsj06/1/
将鼠标悬停在顶部div上，它会展开，将底部div向下推。 我希望底部的div保持不动，顶部的div向上扩展超过视区的顶部。
这可行吗？ 反应溶液是可以接受。
您可以通过将body标记的Margin-Top属性设置为元素悬停前后高度差的负值来手动“上拉”页面。
null
$('.topdiv').hover(function() {
document.body.style.marginTop = "-200px";
}, function() {
document.body.style.marginTop = 0;
}).topdiv { width: 400px; height: 100px; margin: 10px; background-color: red; }
.topdiv:hover { height: 300px; }
.bottomdiv { width: 400px; height: 100px; margin: 10px; background-color: green; }
.bottomdiv:hover { height: 300px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topdiv">
Top
</div>
<div class="bottomdiv">
Bottom
</div>