时间戳

首页 > 解决方案 > 为什么蓝色框（div）没有放置在页面顶部，即使它不相对于任何父级并且它被设置为绝对位置？

html - 为什么蓝色框（div）没有放置在页面顶部，即使它不相对于任何父级并且它被设置为绝对位置？

问题描述

如果我没记错的话，将 a 添加position: absolute;到您的元素会将其从正常的文档流中删除，如果没有相对父级，它将相对于 HTML 元素（页面本身）。

所以如果是这样的话，蓝色框（.box::before）将被放置在页面的左上角，不是吗？由于它与任何父母都不相关，因此我也设置了top: 0; and left: 0;.

那么为什么蓝色的盒子还在中间呢？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="box"></div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #233637;
}

.card{
    width: 0;
    height: 0;
    border-top: 100px solid #eee;
    border-right: 170px solid #ddd;
    border-bottom: 100px solid #ccc;
    border-left: 170px solid #ccc;
}

.box{
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: #ff3838;
}

.box::before{
    content: "";
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: blue;
}

这是代码的图像示例

标签： htmlcss

解决方案

推荐阅读