Question

我在另一个名为“parallaxOne”的部门内设有班级“中心”。有了我的css，如果我在笔记本电脑中查看它，它会正确显示分区，但如果我在手机中查看它，“中心”分区出现在“parallaxOne”分区之外，而在其他浏览器中，它是出现在文本前面。为什么会发生这种情况，我该如何纠正？这是我的代码：

.centre {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateY(-15%);
  width: 0;
  height: 140px;
  border-left: 6px dashed #0079a5;
}

.arrow {
  position: absolute;
  top: 0;   
  left: -6px;
  height: 40px;
  width: 6px;
  background: #007;
  animation: animate 2s infinite;
}

.arrow:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10px;
  width: 20px;
  height: 20px;
  border-bottom: 6px solid #007;
  border-right: 6px solid #007;
  transform: rotate(45deg);
}

@keyframes animate {
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(70px);
    opacity: 1;
  }
  100% {
    transform: translateY(140px);
    opacity: 0;
  }
}

.container {
  max-width: inherit;
  margin: 0 auto;
  background-color: white;
  font-size: 24px;
  padding: 25px;
}

.parallaxOne {
  background: /*url(images/parallax3.jpg); This is an image in my computer*/yellow;
  text-align: center;
  height: 450px;
  padding: 2%;
  margin: 2% 0;
}

.parallaxOne h6 {
  color: black;
  font-size: 200%;
  margin: 8% 30%;
  padding-top: 100px;
  z-index: -1;
}

.parallaxTwo {
  background: /*url('images/parallax2.jpg') no-repeat center; This is an image in my computer*/green;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  height: 600px;
  padding: 2%;
}

<html>
  <head>
    <title>My website</title>
   </head>
   <body>
     <header>
       <h1>My website</h1>
      </header>
      <div class="container">
        <div class="parallaxOne">
          <h3>Welcome to my website!</h3>
          <div class="centre">
            <div class="arrow"></div>
          </div>
        </div>
        <div class="parallaxTwo">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
   </body>
</html

对于长代码我很抱歉，但我尽可能地编辑它来重现同样的问题。

Answer 1

在head部分使用此标记，以便响应扩展您的内容

<meta name="viewport" content="width=device-width, initial-scale=1">

如何阻止元素出现在它的父分区之外？

1 个答案: