Question

我的页面底部有一个固定的工具栏，用户可以在其中更改自己的在线状态并加载其收藏夹列表。

在工具栏中，我有父div元素，点击后，弹出需要直接位于父元素上方的子div元素。

对于在线状态部分，我认为我正在做对，因为在线状态弹出窗口的高度始终是相同的高度。

CSS：

#toolbar
{
    background:url('/_assets/img/toolbar.gif') repeat-x;
    height:25px;
    position:fixed;
    bottom:0px;
    left:1%;
    right:1%;
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    z-index:100;
    font-size:0.8em;
}   
#toolbar #onlineStatus
{
    float:left;
    width:30px;
    padding-top:5px;
    height:21px;
    text-align:center;
    border-right:1px solid #606060;
}
#toolbar #onlineStatusPopUp
{
    display:none;
    border:1px solid #000000;
    height:50px;
    width:211px;
    background:#2b2b2b;
    float:left;
    position:absolute;
    left:-1px;
    top:-51px;
}

HTML：

<div id="toolbar">
   <div id="onlineStatus">
       <a href="javascript:onlineStatusClick();"><img id="onlineStatusIcon" src="/_assets/img/icons/<?php if ($onlinestatus == 0) { echo "online.gif"; } else { echo "hidden.gif"; } ?>" /></a>
       <div id="onlineStatusPopUp">
           <div id="popUpTitleBar">
               <div id="popUpTitle">Online Status</div>
               <div id="popUpAction"><a href="javascript:closeOnlineStatus();">x</a></div>
           </div>
           <div id="onlineStatusMessage">
               <?php if ($onlinestatus == 0) { echo "You're online, <a href=\"javascript:changeOnlineStatus();\">go hide</a>"; } else { echo "You're hidden, <a href=\"javascript:changeOnlineStatus();\">go online</a>"; } ?>
           </div>
       </div>
   </div>
</div>

这是定位弹出元素的正确方法，还是我应该采用不同的方式（即位置：相对而不是绝对的一些调整）？

以下是它的外观屏幕截图：

Online status screenshot.

如果这是正确的，它会带我到我的下一个问题，即弹出的div元素，其大小根据AJAX调用返回的内容而变化。现在我根据通过JavaScript和JQuery返回的项目数量定位元素，这真的很难看。

有更好的方法吗？

首先，这是动态填充的div元素的屏幕截图：

Dynamically filled div element.

CSS：

#toolbar #favoritesOnline
{
    float:left;
    height:21px;
    width:180px;
    padding-top:4px;
    border-right:1px solid #606060;
    text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
    padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
    display:none;
    border:1px solid #000000;
    width:211px;
    background:#2b2b2b;
    float:left;
    position:absolute;
    left:-1px;
}
#toolbar #favoritesOnlineListing
{
    overflow:auto;
}

HTML（注意：它也包含在工具栏div中）：

   <div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
   <img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" /><a href="javascript:favoritesOnlineClick();">Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)</a>
   <div id="favoritesOnlinePopUp">
       <div id="popUpTitleBar">
           <div id="popUpTitle">Favorites Online</div>
           <div id="popUpAction"><a href="javascript:closeFavoritesOnline();">x</a></div>
       </div>     
       <div id="favoritesOnlineListing"></div>
   </div>

这是我用来根据列表中项目数量将其放在父元素上方的丑陋JavaScript（数组[0]是元素数量）。

$("#favoritesOnlinePopUp").css('top', ((parseInt(array[0]) * 39) - 5 + 1) * -1);

Answer 1

如果你的工具栏有一个固定的高度，你可以绝对从底部定位弹出窗口，将toolbar-element作为相对容器。

和css：

#favoritesOnline {
    position: relative;
}

#favoritesOnlinePopup {
    position: absolute;
    width: 211px;
    bottom: 21px;
}

这应该从#favoritesOnline的顶部开始，并在内容填充div时向上增长。

动态定位弹出“窗口”（div元素）

1 个答案: