Странная абсолютная ошибка позиционирования (а может я просто тупая)

Question

Я пытаюсь разместить определенный фрагмент информации в пределах <li>, чтобы ограничить его правой нижней частью коробки.Теперь, глядя на код:

<ul class="tweet_list">
    <li class="tweet_first tweet_odd">
        <a class="tweet_avatar" href="http://twitter.com/">
            <img width="48" border="0" height="48" title=" avatar" alt=" avatar" src="">
        </a>
        <span class="tweet_text">
            @
            <a href="http://twitter.com/"></a>
            lololol
        </span>
        <div class="tweet_actions">
            <img title="Twitter" src="images/twitter/bird_16_blue.png" />
            <time datetime="111-7-2T17:6:2">2/7</time>
            <a class="tweet_action tweet_reply" target="_blank" title="Reply" href="http://twitter.com/intent/tweet?in_reply_to=">
                <img title="Reply" src="images/twitter/reply.png">
                Reply
            </a>
            <a class="tweet_action tweet_retweet" target="_blank" title="Retweet" href="http://twitter.com/intent/retweet?tweet_id=">
                <img title="Retweet" src="images/twitter/retweet.png">
                Retweet
            </a>
            <a class="tweet_action tweet_favorite" target="_blank" title="Favorite" href="http://twitter.com/intent/favorite?tweet_id=">
                <img title="Favorite" src="images/twitter/favorite.png">
                Favorite
            </a>
    </div>
</li>
<!-- These are all the same as the previous li-->
<li class="tweet_even">
<li class="tweet_odd">
<li class="tweet_even">
<li class="tweet_odd">
</ul>

и CSS:

div#sidebar-twitter ul {
    list-style: none outside none;
    text-align: left;
}
div#sidebar-twitter ul li {
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
    height: 58px;
    margin-bottom: 10px;
    max-height: 78px;
    min-height: 58px;
    width: 400px;
}
div#sidebar-twitter ul li a.tweet_avatar {
    float: left;
    padding: 5px;
}
div#sidebar-twitter ul li div.tweet_actions {
    bottom: 0;
    position: absolute;
    right: 0;
}
div#sidebar-twitter ul li:last-child {
    margin-bottom: 0;
}

Как вы можете видеть, я ожидаю, что div.tweet_actions позиционирует себя в правой нижней частиполе <li>, которое должно быть 400x (58/78).Проблема в том, что это не так.Он располагается справа внизу своего родительского элемента, section#left-content.sidebar-content.left ... Теперь, любые идеи о том, как расположить этот div.tweet_actions в нижней правой части <li>, будут приветствоваться ...

Answer 1

Вам нужно добавить position:relative к div#sidebar-twitter ul li.

div#sidebar-twitter ul li {
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
    height: 58px;
    margin-bottom: 10px;
    max-height: 78px;
    min-height: 58px;
    width: 400px;
    position: relative; /* add this */
}

Выполнение этого приведет к абсолютному позиционированию div.tweet_actions относительно li.