top值无效,除非设置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选择器的设置方式搞错了,结果木有效果-->
</body>
</html>
原因:top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。如果 "position" 属性的值为 "static",那么设置 "top" 属性不会产生任何效果。
为啥嘞?
回复
阅读 6.7k
2 个回答

relative, absolute, fixed 都是定位值, top left right bottom才会生效; static为没有定位。

只有脱离文档流的元素才会生效,fixed absolute relative

推荐问题
宣传栏