Динамическое позиционирование всплывающих «окон» (элементы div)

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>

Это правильный способ позиционирования всплывающего элемента или я должен делать это по-другому (то есть позиция: относительная, а не абсолютная с некоторыми изменениями)?

Вот скриншот того, как это выглядит:

Если это правильно, это подводит меня к моей следующей проблеме - всплывающему элементу div, размер которого изменяется в зависимости от содержимого, возвращаемого вызовом AJAX. Прямо сейчас я позиционирую элемент на основе количества элементов, возвращаемых через JavaScript и JQuery, и это действительно ужасно.

Есть ли лучший способ сделать это?

Во-первых, вот снимок экрана динамически заполненного элемента div:

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

Если ваша панель инструментов имеет фиксированную высоту, вы, вероятно, могли бы расположить всплывающее окно абсолютно снизу, с элементом панели инструментов в качестве относительного контейнера.

и css:

#favoritesOnline {
    position: relative;
}

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

Это должно начинаться с вершины #fovingOnline и увеличиваться по мере того, как содержимое заполняет div.