gpt4 book ai didi

javascript - 即使第一个 div 的高度增加,如何保持第二个 div 的位置固定

转载 作者:行者123 更新时间:2023-11-30 12:05:03 25 4
gpt4 key购买 nike

请检查这个 fiddle 并告诉我如何保留第二个 <div>在相同的位置,即使是第一个 <div> 的高度增加。如果第一个<div>重叠第二个就好了。我只是不想让第二个 div 移动。

https://jsfiddle.net/7v9dud8u/

  <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- page content -->
<div id="main-div" style="background-color: #ae2477; width:300px; height: 100px;" onclick="expandHeight();">
Main
</div>
<br/>
<div id="sub-div" style="background-color: #FF0000; width:300px; height: 100px;" onclick="reduceHeight();">
Sub
</div>
<script>
function expandHeight(){
$("#main-div").animate({height:"200px"},400);
}
function reduceHeight(){
$("#main-div").animate({height:"100px"},400);
}
</script>

谢谢。

最佳答案

使用CSS,你可以使用position: absolute;

<style>
#main-div {
position: absolute;
}
</style>

这样做将允许两个 div 在浏览器窗口中自由移动而不会影响彼此。

关于javascript - 即使第一个 div 的高度增加,如何保持第二个 div 的位置固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35470632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com