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

子元素绝对定位,造成 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 07: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月4日
  • 已采纳回答 5月28日
  • 创建了问题 5月27日

悬赏问题

  • ¥15 unity安卓打包出现问题
  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部