Question

我正在尝试在左上角的标题下制作图像，但该图像不想覆盖左侧。

我将位置更改为位置：绝对，将边距和填充设为0，检查了HTML页面，看不到任何会影响该图像的东西。

HTML：

User.findById(decodedToken.userId,)
.then(user =>{
    isAdmin = user.admin;
    if(!isAdmin){
        const error = new Error('Unauthorized')
        error.statusCode = 401
        throw error
    }else{
        req.userId = decodedToken.userId
        next();
    }
}).catch(err=>{
    console.log(err);
    return err
})

CSS：

        <div class="header">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1>Dillan Robbertze<h1>
                        <img src="mountain-og.jpeg">
                    </div>

                </div>
            </div>
        </div>

预期结果：图像在标题的左上方。实际结果：图像的左上方和顶部都有空白。

编辑：我添加了top：0；感谢@Somesh Mukherjee。图像向上移动，但仍有一个不应留的空白空间。

Answer 1

您尚未指定top属性

.header img{
    height:auto;
    left:0;
    top:0;
    margin:0:
    padding:0;
    position:absolute;
    width:100vw;
}

Answer 2

为什么不尝试：

top：-28px; 位置：相对；

在类似情况下帮助了我一次或两次。

Answer 3

向父div元素添加一个类。并添加相对位置。

.myNewClass {
    position: relative;
}

另外，请确保您的父元素没有边距和填充。为此，您可以像这样使用CSS重置：

* {
    margin: 0;
    padding: 0;
}

尽管这将确保您的所有元素没有任何边距或填充，所以您需要自己指定所有需要的内容。如果要使用它，则应将其放在CSS文件的顶部。

顶部和左侧不需要的空白

3 个答案: