时间戳

首页 > 解决方案 > 在容器上使用 css position absolute 时，正文背景颜色隐藏

html - 在容器上使用 css position absolute 时，正文背景颜色隐藏

问题描述

我在 CSS 和引导程序方面遇到了一个奇怪的问题。我是前端开发的新手。我已将引导容器 div 的 CSS 位置设置为绝对值，但随后我的主体背景消失了，当我尝试在 Firefox 中的开发工具中查看它时，它显示主体宽度为 0。有人可以帮我解决这个问题吗？我想将容器内的所有内容都放在中心。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(to right, #55aaaf, #2a929d, #5cb3ad);
  /* This background colour is not showing */
}

.container {
  position: absolute;
  max-width: 800px;
  height: 500px;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: blue;
}

.myRightCtn {
  position: relative;
  border-radius: 50px;
  height: 100%;
  padding: 25px;
  background: lightgreen;
  padding-right: 50px;
}

.myLeftCtn {
  border-radius: 50px;
  position: relative;
  height: 100%;
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkgreen;
}



.myCard {
  background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="login.css">
    <title>Document</title>
</head>
<body>

    <div class="container">
        <div class="myCard">
            <div class="row">

                <div class="col-md-4">
                    <div class="myLeftCtn">
                        <img src="img/login.png" alt="image" class="myImg">
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="myRightCtn">

                        <form action="" class="myForm text-center">
                            <header>Registration</header>
                            <h6>CLICK FOR YOUR SHOOT</h6>

                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" name="name" class="input" id="name" placeholder="John Doe">
                            </div>

                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" name="email" id="email" placeholder="johndoe@gmail.com">
                            </div>

                            <div class="form-group">
                                <label for="dob">Date Of Birth</label>
                                <input type="text" name="dob" id="dob" placeholder="April 19, 1996">
                            </div>

                            <div class="form-group">
                                <label for="city">City</label>
                                <input type="text" name="city" id="city" placeholder="Paris">
                            </div>

                            <div class="form-group">
                                <label for="country">Country</label>
                                <input type="text" name="country" id="country" placeholder="London">
                            </div>
                            <!-- Todo subscription -->

                            <button id="btn-cancel">CANCEL</button>
                            <button id="btn-confirm">CONFIRM</button>

                        </form>

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

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

标签： htmlcssbootstrap-4frontendcss-position

解决方案

推荐阅读