CSS 定位一个 Div 以显示在另一个 DIV 下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1909222/
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
Position a Div to appear below another DIV
提问by fireBand
Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.
我有两个 DIV 元素，其中一个具有绝对位置（主 DIV 的左下角）。第二个 DIV 是隐藏的，只能通过单击链接显示。
I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.
我需要第二个出现在第一个的正下方。但是由于第一个 div 的位置是绝对的，因此第二个出现在第一个的顶部。
HTML Code:
HTML代码：
<div class ="main-div">
<div class = "wrapper">
<div class ="first-div">
<a href ="blah"> <span>my link</span> </a>
//this is absolute positioned
</div>
<div class ="second-div">
//this only appears after clicking on a link
<form>
<textarea>
</textarea>
</form>
</div>
</div>
</div>
CSS:
CSS：
div.wrapper {
width:inherit;
float:left;
bottom:6px;
position:absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div {
padding-top: 2px
}
div.main-div{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
padding:8px 13px 4px 13px;
min-height:61px;
position:relative;
}
Thanks in advance for any help.
在此先感谢您的帮助。
回答by Michael
I think the solution entails doing the following. Have a wrapper div:
我认为解决方案需要执行以下操作。有一个包装 div：
<div id="my_wrapper">
content
</div>
Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.
将这个 div 绝对定位。然后在这个 div 里面有两个 div，你的可见 div 和需要“变成”可见的那个。
<div id="my_wrapper">
<div id="visible_item">Item</div>
<div id="may_become_visible">Not Visible Now Item</div>
</div>
Then you can show/hide as necessary and position the inside content correctly.
然后您可以根据需要显示/隐藏并正确定位内部内容。
回答by Brian Hasden
Ok, with you updated question I believe I've created what you're looking for with the following:
好的，随着您更新的问题，我相信我已经创建了您正在寻找的以下内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
HTML
{
margin: 0px;
padding: 0px;
height: 100%;
}
BODY
{
margin: 0px;
padding: 0px;
height: 100%;
}
div.first-div
{
width: inherit;
float: left;
bottom: 60px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div
{
display: none;
position: absolute;
float: left;
bottom: 0px;
}
div.main-div
{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
min-height:61px;
position:relative;
float: left;
height: 100%;
}
</style>
<div class="main-div">
<div id="firDiv" class="first-div">
<a href="#" onClick="document.getElementById('secDiv').style.display='block';"><span>my link</span></a>
//this is absolute positioned
</div>
<div id="secDiv" class="second-div">
//this only appears after clicking on a link
<form>
<textarea></textarea>
</form>
</div>
this is my content
</div>
</body>
</html>
Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:
现在，这样做是将第一个和第二个 div 绝对定位在页面底部，使它们不会相互重叠。如果您不喜欢第一个 div 离页面底部如此之高的事实，您可以这样修改第一个 div 样式：
div.first-div
{
width: inherit;
float: left;
bottom: 20px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
and then update the link to
然后将链接更新为
<a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a>
Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.
基本上，您在那里所做的是将第一个 div 更改为更靠近页面底部，然后在单击链接时移动它，以便为第二个 div 留出更多空间。
It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.
它没有解决在绝对定位的 div 下显示相对定位的 div 的根本问题，但希望可以解决您的具体问题。
回答by Brian Hasden
Just a guess, but have you tried adding the style clear: both to the second div? I doubt it will help, but it might.
只是猜测，但您是否尝试过将样式 clear: both 添加到第二个 div？我怀疑它会有所帮助，但它可能会有所帮助。
You can also try adding a top margin for the second div that is equal to the height of the first div. Basically, something like:
您还可以尝试为第二个 div 添加一个与第一个 div 的高度相等的上边距。基本上，类似于：
<div id="second-div" style="padding-top: 40px">
Where 40px is the height of the first div. The issue there is that you'd need to know what the height of the first div is and if it is variable then this approach will not help.
其中 40px 是第一个 div 的高度。问题是您需要知道第一个 div 的高度是多少，如果它是可变的，那么这种方法将无济于事。
