Question

我想在浏览器窗口的左下角创建一个消息框。我希望div保持在左下角。因此，如果我让浏览器变小，它就不会消失。这是我正在使用的jsfiddle。但它不起作用。怎么能用css完成？这是我的css代码：

#lowerleft
{
    margin-bottom: 1px;
    margin-left : 1px;
    width: 200px;
    height: 200px;
    background-color: red;
    color: green;
}

Answer 1

看看位置;在这种情况下位置：固定;底部：0; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

#lowerleft
{
    margin-bottom: 1px;
    margin-left : 1px;
    width: 200px;
    height: 200px;
    background-color: red;
    color: green;
    position: fixed;
    bottom: 0;
}

<div id="lowerleft">
    I am stuck to lower left border of browser. And I am stuck at the top of lower boundary of te browser.
</diV>

Answer 2

#lowerleft
{
    position:fixed;
    bottom:0;
    left:0;
    margin-bottom: 1px;
    margin-left : 1px;
    width: 200px;
    height: 200px;
    background-color: red;
    color: green;
}

Jsfiddle Demo

Answer 3

致css添加此内容：

position: absolute;
bottom: 0px;
left: 0px;

JSFiddle

Answer 4

使用absolute定位（下面的语法示例）：

#lowerleft {
    position: absolute;
    left: 0; bottom: 0;
}

您目前正在做的是修改元素的margin。这仅对围绕主题的元素产生影响。

使用absolute定位将主题div置于其他所有内容之上，对周围元素无效。

从w3Schools网站here了解absolute定位。

如何在div中将div对齐到左下角

4 个答案: