如何將div對齊到css中的左下角

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

要將css補充一點：

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

JSFiddle

Answer 3

使用absolute定位（以下語法示例）：

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

什麼目前你正在做的是改變元素的margin。這僅對圍繞主題的元素有影響。

使用absolute定位將主題div放在其他任何位置上，具有對周圍元素沒有影響。

瞭解有關從w3Schools網站here的定位。

Answer 4

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

Jsfiddle Demo