Question

我有一个要放置在另一个div下方的div。但是我认为它重叠并且不可见。我正在尝试将div划分为2以下的div。

<body>
<div class="split left">
  <div class="centered">
    <img src="assets/img/tms1.png" alt="Avatar woman" />
    <h2>our solution</h2>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <img src="assets/img/logo.jpg" alt="Avatar man" />
    <h2>our cause</h2>
  </div>
</div>

<div class="page2"><img src="assets/img/logo.png" /></div>

<div class="page2"><img src="assets/img/logo.png" /></div>不可见。

css：

body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}

.left {
left: 0;
background-color: #111;
}

.right {
right: 0;
background-color: white;
color: black;
}

.centered {
 position: absolute;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 text-align: center;
 }

.centered img {
width: 250px;
border-radius: 50%;
}

未显示的div的CSS。

.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
  }

https://jsfiddle.net/uxfynrmj/

Answer 1

有几个问题。最重要的是，如果要在position: fixed div下方静态放置另一个元素，则需要删除.split。

最值得注意的是，我删除了固定位置和绝对位置的子项，并添加了环绕式div宽度display: flex。

下面的代码段：

html {
  scroll-behavior: smooth;
  /*height: 100%;*/
}
body {
  font-family: sans-serif;
  font-size: 30px;
  color: white;
  height: 100%;
}

.splits {
  display: flex;
}

.split {
  flex: 1 1 50%;
  background: black;
}

.right {
  right: 0;
  background-color: white;
  color: black;
}

.centered {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.centered img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.page2 {
  width: 100%;
  background-color: pink;
}

.page2 img {
  width: 100%;
  background-color: pink;
}

<html>
  <head>
    <title>THS</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="splits">
      <div class="split">
      <div class="centered">
        <img src="http://lorempixel.com/400/200" alt="Avatar woman" />
        <h2>our solution</h2>
      </div>
    </div>

    <div class="split right">
      <div class="centered">
        <img src="http://lorempixel.com/400/400" alt="Avatar man" />
        <h2>our cause</h2>
      </div>
    </div>
    </div>

    <div class="page2"><img src="http://lorempixel.com/400/400" /></div>
  </body>
</html>

将div放在另一个div下方并防止重叠

1 个答案: