html - 将父 div block 与底部对齐

Question

考虑以下 HTML:

<div style="height:250px; background-color: aqua;">
    <div id="i">
        Some text
    </div>
</div>

和 css 样式:

#i{
    position:relative;
    font-style:italic;
    color: navy;
    text-align:right;
    bottom:0;
}

JSFIDDLE .我希望 div#i 位于右下角。为什么这不是真的以及如何解决这个问题？

Answer 1

将position更改为absolute

<div style="height:250px; background-color: aqua;position:relative">
    <div id="i">
        Some text
    </div>
</div>

#i{
    position:absolute;
    font-style:italic;
    color: navy;
    right:0;
    bottom:0;
}

FIDDLE