将 div 放置在左下角

Question

如何将内部 div 移动sqrBall到父 div 的左下角container。HTML 代码如下：

<div class="container">
    <div class="sqrBall">

    </div>
</div>

这是CSS：

.container{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
    }
    .sqrBall{
        width: 10px;
        height: 10px;
        background-color: blue;

    }

这是一个演示

Answer 1

如果父元素具有相对定位，则可以在内部元素上使用绝对定位。例如：

.container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
    position:relative;
}

.sqrBall{
    width: 10px;
    height: 10px;
    background-color: blue;
    position:absolute;
    bottom:0;
    left:0;
}

注意，如果父元素没有相对定位，则内部元素将定位到主体的左下角，而不是其父元素。（至少在这个例子中）