[英]Relative Position
我有一个随着用户在其上添加图像而扩展的div。 在div下,我有一个按钮。 当div向下扩展时,我需要此按钮才能向下滚动。 按钮位置取决于div位置。
我希望divUpload在用户将照片添加到面板中时下降:文件。
<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>
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;
}
的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
}
每当我对CSS感到疑惑时,我都会去拜访Peter-Paul Koch-
http://www.quirksmode.org/css/display.html
但是如果您不想发现该站点,那么在大多数情况下,我将使用display:block; 按钮,它将确保它位于上方的按钮下方。
如果我有一组水平排列的按钮,我会将它们全部封装在一个显示为div的div内。 并使每个按钮显示:inline; 。 这样,整个组就会被推到上方的div下面,但是每个按钮都在div内联。
我将让您研究在主div的一侧或另一侧使用一组垂直按钮的处理方式。
问题是CSS中的这些行:
#divCarregando {
position:absolute;
“绝对定位的框已从正常流程中移出” ,这(在我看来)在您的页面上创建了绝对MAYHEM。
我的#1建议是使用流程流畅的HTML文档,而不必求助于absolute
定位。
如果您不能这样做,则唯一的选择是重新计算图像容器的底部位置并将其应用于按钮容器的顶部。
使用jQuery(仅出于简化示例,因为没有它当然可以实现):
添加图像时:
var images = $( "#divCarregando" ),
position = images.offset();
$( "#divUpload" ).css({
"top": position.top + images.outerHeight( true )
});
对于它的价值,我强烈建议不要使用absolute
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.