forece 2022-05-27 13:39 采纳率: 100%
浏览 157
已结题

子元素绝对定位，造成 body 背景色消失问题？

问题遇到的现象和发生背景

今天练习做登录页，给 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 值，但是依然没有高度。但是背景色却能回来。

虽然问题解决了，但是我不知道是什么原因造成的。望有懂的小伙伴解答一下。

望解惑

  • 写回答

2条回答 默认 最新

  • 那个角落有个bug 2022-05-27 15:01
    关注

    要点1: 假设html标签元素a的position定义为absolute的话，此元素会以包含自身的最近的postion定义为absolute或者relative的标签元素b为参照进行定位
    要点2: 如果找到b标签元素，但是b标签元素高度未定义时，则b标签元素高度默认为其内部符合文档流排列的元素高度；如果b标签元素内除了标签元素a之外，再无其他元素内容，则b标签高度为0
    要点3：如果标签元素a定义的高度大于 b标签元素高度时，在b标签元素未设置 overflow: hidden;情况下，则标签元素a的一部分会在b标签元素外边； 如果b标签元素设置了 overflow: hidden; 这标签元素a的超出b标签元素外的那部分在页面上是隐藏的
    要点4：如果b标签元素时body标签，body标签元素中只要存在文本或者符合文档流排列的元素，其高度最小都是整个页面高度（内容超多一屏时出现滚动条）；但同时body只存在标签a的话，body的高度也是0

    上边标签元素a、b是方便理解， a不是html中的超链接a标签

    解决：
    1、给body手动设置宽高

    body {
  width: 100vw;
  height: 100vh;
}

    2、给body标签内添加任意符合文档列排列的元素(此元素display属性不能定义为none， 保证此元素在dom树上; 可以设置visibility: hidden;)即可

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <style>
    *{
        margin: 0;
        padding:0;
        box-sizing: border-box;    
    }
    
    body {
        background:linear-gradient(100deg, #eef6fd, #62b1fb);
    }
    
    .login {
        position: absolute;
        top:25%;
        left: 50%;
        transform: translate(-50%);
        width: 400px;
        height: 320px;
        background-color: #FFF;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
</head>
  <body>
    <div style="visibility: hidden;">1</div>
    <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>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 6月5日
  • 已采纳回答 5月28日
  • 创建了问题 5月27日

悬赏问题

  • ¥15 任务A：大数据平台搭建（容器环境）怎么做呢？
  • ¥15 r语言神经网络自变量重要性分析
  • ¥15 基于双目测规则物体尺寸
  • ¥15 wegame打不开英雄联盟
  • ¥15 公司的电脑，win10系统自带远程协助，访问家里个人电脑，提示出现内部错误，各种常规的设置都已经尝试，感觉公司对此功能进行了限制（我们是集团公司）
  • ¥15 救！ENVI5.6深度学习初始化模型报错怎么办？
  • ¥30 eclipse开启服务后，网页无法打开
  • ¥30 雷达辐射源信号参考模型
  • ¥15 html+css+js如何实现这样子的效果？
  • ¥15 STM32单片机自主设计