Html 将一个div放置在左下角

如何将内部div

sqrBall

移动到父div

容器的左下角。
以下是HTML代码：

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

    </div>
</div>

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

.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;
}

n、 b.如果父元素不是相对定位的，则内部元素将定位在主体的左下角，而不是其父元素。（至少在这个例子中）
试试这个演示


.container{
宽度：300px；
高度：300px；
边框：1px纯黑；
保证金：0自动；
位置：相对/*容器应具有相对位置*/
}
sqrBall先生{
位置：绝对；/*子级应具有绝对位置*/
底部：0；
左：0；
宽度：30px；
高度：30px；
背景颜色：蓝色；
}

像这样尝试：

将以下内容与代码一起添加

CSS:

您必须向现有的class.sqrBall中再添加两个属性

属性是

position: relative;
top: 98%;

下面是工作演示，希望对您有所帮助

.集装箱
{
宽度：500px；
高度：500px；
边框：1px纯黑；
保证金：0自动；
}
sqrBall先生
{
背景颜色：蓝色；
高度：10px；
位置：相对位置；
最高：98%；
宽度：10px；
}
@NaeemShaikh我对css非常陌生，所以我想知道是否有其他方法可以不使用相对和绝对位置来实现这一点谢谢关于相对位置元素中绝对位置的建议。你说得对@华硕散热模组
.sqrBall {
width: 10px;
height: 10px;
 background-color: blue;
 position: absolute;
 top: 98%;
 left: 0;
   }
.container
{
position:relative;
}

.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;

    }

.container {       
    display:table;
}
.sqrBall {       
    float:left;
    margin-top: 100%;
}

position: relative;
top: 98%;