相对位置答案

【问题标题】：Relative Position相对位置
【发布时间】：2013-01-28 09:08:44
【问题描述】：

我有一个 div 会随着用户在其上添加图像而扩展。在 div 下我有一个按钮。当 div 向下扩展时，我需要此按钮向下。按钮位置取决于 div 位置。

我希望 divUpload 在用户将照片添加到面板时关闭：文件。

HTML：

<form id="form1" runat="server" enctype="multipart/form-data">
    <div id="divListFiles">
        <asp:FileUpload ID="files" name="files[]" accept='image/*' runat="server" multiple />
        <asp:Panel ID="list" name="list" runat="server" Height="107px">
        </asp:Panel>
    </div>
    <div id="divListDel">
        <output id="listdel" name="listdel"></output>
    </div>
    <div id="divCarregando">
        <img id="carregando" src="http://bps.saude.gov.br/visao/img/carregando.gif" alt="Carregando..">
    </div>
    <div id="divNumImages">
        <asp:TextBox ID="txbNumImages" runat="server"></asp:TextBox>
    </div>
    <div id="divUpload">
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="ShowCarregando()" OnClick="btnUpload_Click" />
    </div>

CSS：

divListFiles {
    position:absolute;
    left:9px;
    top:99px;
    width:653px;
    height:105px;
    z-index:1;
}

#divListDel {
    position:absolute;
    left:81px;
    top:73px;
    width:627px;
    height:33px;
    z-index:1;
    text-align: left;
}

#divCarregando {
    position:absolute;
    left:7px;
    top:113px;
    width:423px;
    height:231px;
    z-index:-1;
    text-align: left;
}

#divNumImages {
    position:absolute;
    left:9px;
    top:100px;
    width:123px;
    height:27px;
    z-index:5;
    text-align: left;
}

#divUpload {
    position:relative;
    left:19px;
    top:241px;
    width:65px;
    height:27px;
    z-index:1;
    text-align: left;
}

#form1{
    height: 303px;
}

#carregando{
    visibility:hidden;
}

.thumb {
    height:65px;
    width:90px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

.thumbdel {
    height: 17px;
    width: 17px;
    margin: 60px 81px 0 0;
}

【问题讨论】：

你试过了吗？如果是这样发布您的代码

标签： javascript html css position css-position

【解决方案1】：

您所描述的是以下情况的正常行为：

<div><!-- ...the images here ... --></div>
<button>The Button</button>

...默认情况下，div 的宽度和高度都尽可能高，其后面的内容会在下方呈现。

Live Example | Source

【讨论】：

【解决方案2】：

问题在于您的 CSS 中的这些行：

#divCarregando {
    position:absolute;

"Absolutely positioned boxes are taken out of the normal flow"，在您的页面上创建（在我看来）绝对的 MAYHEM。

我的 #1 建议是使用流畅的 HTML 文档，而不使用 absolute 定位。

如果您不能或不会这样做，您唯一的选择是重新计算图像容器的底部位置并将其应用到按钮容器的顶部。

使用 jQuery（只是为了便于举例，没有它当然可以）：

添加图片时：

var images = $( "#divCarregando" ),
    position = images.offset();

$( "#divUpload" ).css({
    "top": position.top + images.outerHeight( true )
});

就其价值而言，我强烈建议不要使用absolute。

【讨论】：

【解决方案3】：

HTML

<div class="wrap">
<div class="innner">nfdj</div>
<button>Click</button>
</div>

CSS

.wrap{
    width:250px;
    background:green;
    height:auto;
}
div{
    width:100%;
    height:150px;
    background:grey
}

DEMO

【讨论】：

【解决方案4】：

每当我对 CSS 有疑问时，我都会去拜访 Peter-Paul Koch -

http://www.quirksmode.org/css/display.html

但如果您不想发现该站点，那么在大多数情况下，我会使用 display: block; 作为按钮，这将确保它位于其上方的下方。

如果我有一组水平排列的按钮，我会将它们全部包含在 display: block; 的 div 中，并使每个按钮 display: inline;。这样，整个组就会被推到上面的 div 下方，但每个按钮都内联在 div 内。

我会让你弄清楚如何处理主 div 一侧或另一侧的一组垂直按钮。

【讨论】：