问题遇到的现象和发生背景
今天练习做登录页,给 body 设置背景色,然后给 login 盒子加上绝对定位后,发现背景色消失。
问题相关代码
<body>
<div class="login">
<h2>用户登录</h2>
<form action="">
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<div class="captcha">
<input type="text" placeholder="请输入验证码" />
<img src="images/captcha.png" alt="" />
</div>
<button class="submit">登录</button>
</form>
</div>
</body>
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
background:linear-gradient(100deg, #eef6fd, #62b1fb);
}
.login {
width: 400px;
height: 320px;
position: absolute;
right:15%;
top:25%;
background-color: #FFF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
}
我的解答思路和尝试过的方法
网上查了一下,说是子元素因为定位,脱离的文档流,然后 body 的高度丢失问题造成的,只要把绝对定位取消掉,背景色又回来了。不过这不是解决问题的思路。
目前发现的解决方法:
- 给 body 上高度: height: 100vh;
- 加一个不定位的空子元素,如
<div>&npsp;</div>
后来我发现不设置 body 高度,只要把全局设置的 margin: 0 关闭,或者给 body 上个 margin 值也可以让 body 的背景色回来。F12查看发现 body 有了 margin 值,但是依然没有高度。但是背景色却能回来。
虽然问题解决了,但是我不知道是什么原因造成的。望有懂的小伙伴解答一下。
望解惑