html - 使用CSS将元素移出div

Question

实际上，我试图将 .box div(蓝色框)内的内部段落元素 (p) 移动/定位到 上方code>.box 下面 fiddle 中的div(蓝色框):

html, body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

我的预期输出是:

html,
body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}

.contents {
  position: relative;
  top: -50px;
}

<div class="container">
  <h4>Box heading</h4>
  <p>This is some awesome text, which is inside the box</p>
  <p>This is also another great paragraph that is better than any book ever written</p>
  <div class="box">
    <div class="contents"></div>
  </div>
</div>

但是，在上面的代码片段中，我实际上将段落元素放置在蓝色框 (.box div) 上方。有没有一种方法可以使用 css 将段落元素从其上方的蓝色框内移出。

我试过使用 position 属性或给 .contents 一个负边距，但是，这不会为上面的文本增加空间并导致重叠标题和/或蓝框问题。

注意:框内的段落可以是任意长度，因此我不知道段落的高度和偏移量。

Answer 1

您可以为内容元素及其容器考虑 position:relative 并使用相同数量的像素:

body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
  position: relative;
  top: 110px;
}

.contents {
  position: relative;
  top: -110px;
}

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

或者考虑以更动态的方式进行翻译:

body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
  transform:translateY(40%); /*use 100% if height auto*/
}

.contents {
  transform:translateY(-100%);
}

<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>