html中盒子没有置顶

   <style>
        html {
            background-color: blue;
        }
        
        .box1 {
            width: 1040px;
            top: 0px;
            height: 10000px;
            background-color: rgb(255, 0, 0);
            /* 居中盒子两个条件，有宽度，左右外对齐为auto值 */
            margin: 0 auto;
        }
        
        .vertical {
            width: 50px;
            height: 10000px;
            background-color: black;
            margin-left: 80%;
            z-index: 10;
        }
        
        .line {
            position: fixed;
            left: auto;
            right: auto;
            bottom: 20%;
            width: 1040px;
            height: 50px;
            background-color: rgb(229, 255, 0);
            z-index: 8;
        }
        
        .bottombox {
            position: fixed;
            left: auto;
            right: auto;
            bottom: 0%;
            width: 800px;
            height: 150px;
            background-color: rgb(9, 255, 243);
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="vertical"></div>
        <div class="line"></div>
        <div class="bottombox"></div>
    </div>
</body>

</html>


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/630336405346132.png "#left")

style中加一行 body {
margin-top: 0px;
}

浏览器会有一些默认样式、边距，具体可以百度normalize.css 、reset.css样式重置了解

/* 清除默认边距 */
* {
    margin: 0;
    padding: 0;
}

img