Question

我正在尝试创建类似于此image的叠加层，但似乎无法弄清楚。

我尝试使用绝对定位，但似乎不适用于1个以上的子元素。

可以解决这个问题吗？

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  padding: 20px;
  width: 100%;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: absolute;
  width: 40%;
}

.element2 {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: absolute;
  width: 40%;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
 </head>
<body>
  <div class="parent">
    Parent element
      <div class="element">Child element</div>
      <div class="element2">Second Child element</div>
  </div>
</body>
</html>

Answer 1

这是一个简短的介绍。

我将主容器设置为position: relative;，以便使任何position: absolute;个子级都相对于父级定位。

我做一个top: 100%;与transform: translateY(-50%);结合起来的儿童容器，以容纳所有儿童，并将其放置在主容器的底部（并稍微伸出）。它上面还带有display: flex;，以便其子代并排对齐。

您可以根据需要添加或删除子级，它将自动容纳。

.container {
  position: relative;
  height: 125px;
  background-color: #42b6f4;
}

.container>.main-text {
  padding: 20px;
  color: white;
  font-family: Arial;
  font-size: 24px;
}

.child-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  top: 100%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.child-container > .child {
  flex-grow: 1; /* Children should grow to fill unoccupied space */
  padding: 20px;
  margin: 20px; /* Amount of space between children */
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 5px;
}

<div class="container">
  <div class="main-text">This is some main text</div>
  <div class="child-container">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
</div>

下面是一个在所有元素上都带有边框的版本，以稍微解释一下概念。

.container {
  position: relative;
  height: 125px;
  border: 2px solid red;
  margin-bottom: 60px;
}

.container>.main-text {
  padding: 20px;
  color: white;
  font-family: Arial;
  font-size: 24px;
}

.child-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 100%;
  left: 50%;
  width: 100%;
  transform: translateY(-50%) translateX(-50%);
  border: 2px dotted green;
}

.child-container > .child {
  flex-grow: 1; /* Children should grow to fill unoccupied space */
  padding: 20px;
  margin: 20px; /* Amount of space between children */
  border: 2px dashed blue;
  border-radius: 5px;
}

<div class="container">
  <div class="main-text">This is some main text</div>
  <div class="child-container">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<span style="color: red;">Parent Container</span><br>
<span style="color: green; margin-left: 15px;">Child Container</span><br>
<span style="color: blue; margin-left: 30px;">Child</span>

Answer 2

您的第二个子元素位于第一个子元素的顶部。

1）添加位置：相对于父元素

2）您必须使用上，下，左，右css属性将子元素放置在所需的位置。

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  padding: 20px;
  width: 100%;
  position : relative;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: absolute;
  width: 40%;
  top : 20;
  right : 0;
}

.element2 {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: absolute;
  width: 40%;
  top : 20;
  left : 20;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
 </head>
<body>
  <div class="parent">
    Parent element
      <div class="element">Child element</div>
      <div class="element2">Second Child element</div>
  </div>
</body>
</html>

在CSS中创建叠加层

2 个答案: