Question

我正在尝试重新创建设计，但是覆盖部分遇到了麻烦。我的想法是为菜单栏设置一个div，为地球设置一个div，并为标题文本添加一个div。但是，将它们放置在看似重叠的位置上会给我带来麻烦。我尝试使用zIndex，但这似乎无济于事。

我目前有这个：

在我的App.js中设置代码的方式：

textButton?.setOnClickListener {
    textView.text = ""
    val num = entry.text.toString().toIntOrNull()
    val toPrint = if (num != null) {
        oddOrEven(num) + isPrime(num)
    } else {
        ""
    }
    textView.text = toPrint
}

Answer 1

因此，要使它们分层，您需要将它们全部定位为绝对，然后通过在x和y轴以及z-index上平移或使用top / bottom / left / right属性来对它们进行排序，不建议这样做，因为这将很难管理。它还可能最终使后面的元素无法访问！

由于地球是背景图像，因此您可以使背景图像位于线性渐变顶部（如下图所示），然后您的标题和文本可以在法线内其预期位置占据背景顶部的空间文档流，您可以从那里进行调整。

html, body {
  width: 100%;
  height: 100%;

}

body {
  margin: 0;
  background-repeat: no-repeat;
  background: #fee807;
  background-size: cover;
  background: url(https://via.placeholder.com/250) 80% -35% no-repeat;
  background: url(https://via.placeholder.com/250) 80% -35% no-repeat,
    linear-gradient(
        180deg,
        rgba(254, 232, 7, 1) 0%,
        rgba(240, 118, 75, 1) 37%,
        rgba(212, 62, 128, 1) 70%,
        rgba(129, 86, 158, 1) 92%
    );
}

Answer 2

结果

HTML

<div class="bg-gradient">
  <div class="container">
    <div class="menu">
      <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
    </div>

    <div class="globe">
    </div>

    <div class="text">
      <h1>MAKE THE CONNECTION</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>       
  </div>
</div>

CSS

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

.bg-gradient {
  width: 100vw;
  height: 100vh;

  background: yellow;
}

.menu ul {
  background: red;
  display: flex;
}

.menu ul li {
  margin: 10px;
  list-style: none;
}

.globe {
  width: 300px;
  height: 300px;
  background: green;
}

.container {
  max-width: 80%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.menu {
  grid-column: 1 / 3;
   grid-row: 1 / 2;
}

.globe {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.text {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

创建重叠的div

2 个答案: