鍍金池/ 問答/HTML/ top值無效，除非設(shè)置position:absolute; top值才起作用

top值無效，除非設(shè)置position:absolute; top值才起作用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
 
        #div1{
            height:300px;
            width:300px;
            background-color:red;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <!--我最初寫的時候，就把id與class選擇器的設(shè)置方式搞錯了，結(jié)果木有效果-->
</body>
</html>
原因：top 屬性規(guī)定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。如果 "position" 屬性的值為 "static"，那么設(shè)置 "top" 屬性不會產(chǎn)生任何效果。
為啥嘞？
回答
編輯回答
逗婦惱

relative, absolute, fixed 都是定位值, top left right bottom才會生效； static為沒有定位。

2017年10月17日 22:58
編輯回答
負(fù)我心

只有脫離文檔流的元素才會生效，fixed absolute relative

2017年11月11日 07:54