css - 在纯 CSS 中，父级之上的子级具有动态间距

Question

我的 CSS 技能现在很低，我需要为我的网站做一些困难的事情。任何帮助将不胜感激。谢谢。

在图片“parent”div(宽度等于某个常量值)中可能有任意数量(这是我的问题的症结所在) child ，其中有一些长词。

.wrap{
   position: static;
}

.parent{
    position: absolute;
    width:100%;
}

.child{
    float: left;
    visibility: hidden;
}

<div class="wrap">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

children 必须“漂浮”在 parent 之上， child 之间的间距应该不会让太长的单词覆盖在每个 child 之上。

我不知道如何用纯 CSS 制作它。这可能吗？

附言我想强调的是: children 必须像图片中那样飞过 parent ，他们之间有一些间距。我知道“相对绝对”定位，但这还不足以让 child 像图中那样飞起来。

Answer 1

您可以将子元素设置为相对定位，然后将它们的顶部偏移量设置为某个负值，这会将它们拉到父元素之上。要在每个 child 之间创建空间，您可以将第一个和最后一个 child 的左右偏移设置为某个值。

请看下面的演示:

/*IGNORE STYLES FROM HERE.....*/

body {
  display: flex;
  height: 100vh;
}

.container {
  border: 5px solid navy;
  width: 500px;
  margin: auto;
}

.box {
  background: white;
  border: 5px solid navy;
  overflow: auto;
  padding: 40px;
  position: relative;
  top: -100px;
}

/*....UNITL HERE*/

.container {
  display: flex;
}

.box {
  overflow: auto;
  position: relative;
  top: -100px;
}
.box:first-child {
  left: -50px;
}
.box:last-child {
  right: -50px;
}

<div class="container">
  <div class="box">
    <h2 class="box__title">Child</h2>
    <p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
  </div>
  <div class="box">
    <h2 class="box__title">Child</h2>
    <p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
  </div>
  <div class="box">
    <h2 class="box__title">Child</h2>
    <p class="box__word">LooooooooooooooongWorrrrrrrrrrd</p>
  </div>
</div>