html - 我的文本没有显示在绝对定位的 div 内

Question

我的文本没有显示在绝对定位的 div 内。其中一些显示，但另一些则不显示。 div 是绝对定位的 而且样式是一样的，但是不知道为什么不显示。

.shapeContainer {
  position: relative;
}

.shape {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 255px;
  background: rgb(0, 31, 255);
  background: linear-gradient( 135deg, rgba(0, 31, 255, 1) 0%, rgba(0, 44, 119, 1) 27%);
  clip-path: polygon( 0 0, 100% 0, 100% 78.51%, 25.42% 78.51%, 27.25% 53.71%, 22.74% 53.71%, 18.92% 100%, 0 100%);
}

.shape2 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 260px;
  background-color: white;
  clip-path: polygon( 0 0, 100% 0, 100% 79.67%, 24.85% 79.67%, 26.55% 55.28%, 22.88% 55.28%, 19.06% 100%, 0 100%);
}

.shape3 {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 265px;
  margin-bottom: 0;
  background-color: rgba(0, 44, 119, 1);
  clip-path: polygon( 0 0, 100% 0, 100% 80.95%, 24.15% 80.95%, 25.98% 57.14%, 23.02% 57.14%, 19.35% 100%, 0 100%);
}

.shape4 {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 30px;
  margin-top: 75px;
  background-color: #004be2;
}

.shape5 {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 255px;
  background-color: #002157;
  clip-path: polygon(0 0, 25% 0, 18% 92%, 0 92%);
}

.shape6 {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 240px;
  background-color: #0c00e0;
  clip-path: polygon(47% 19%, 100% 19%, 100% 72%, 42% 72%);
}

.shape7 {
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 200px;
  background-color: #00001a;
  opacity: 0.5;
  clip-path: polygon(56% 0, 100% 0, 100% 47%, 52% 47%);
}

.shape8 {
  position: absolute;
  top: 100px;
  left: -45px;
  z-index: 7;
  width: 100%;
  height: 100px;
  background-color: #00001a;
  opacity: 0.5;
  clip-path: polygon(32.19% 61.15%, 38.25% 61.15%, 37.3% 90%, 31.26% 90%);
}

.shape9 {
  position: absolute;
  top: 100px;
  left: 25px;
  z-index: 8;
  width: 100%;
  height: 100px;
  background-color: #00001a;
  opacity: 0.5;
  clip-path: polygon(32.19% 61.15%, 38.25% 61.15%, 37.3% 90%, 31.26% 90%);
}

<header className="header">
  <div className="container">
    <div className="shapeContainer">
      <div className="shape">shape8 1</div>
      <div className="shape2"> shape 2</div>
      <div className="shape3">shape 3</div>
      <div className="shape4">shape 4</div>
      <div className="shape5">shape5 </div>
      <div className="shape6">shape6</div>
      <div className="shape7">shape 7</div>
      <a href="#" className="shape8">
              shape8
            </a>
      <a href="#" className="shape9 ">
              shape9
            </a>
    </div>
  </div>
</header>

Answer 1

您正在使用“classname”属性，请在 HTML 文件中将其更改为“class”。它会起作用的!

下面的正确代码

<header class="header">
        <div class="container">
            <div class="shapeContainer">
                <div class="shape">shape8 1</div>
                <div class="shape2">shape 2</div>
                <div class="shape3">shape 3</div>
                <div class="shape4">shape 4</div>
                <div class="shape5">shape5</div>
                <div class="shape6">shape6</div>
                <div class="shape7">shape 7</div>
                <a href="#" class="shape8">
                    shape8
                </a>
                <a href="#" class="shape9">
                    shape9
                </a>
            </div>
        </div>
    </header>