Переместить элемент из div с помощью css

Question

По сути, я пытаюсь переместить / позиционировать внутренний элемент абзаца (p) внутри .box div (синее поле), чтобы оно располагалось выше .box 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 отрицательное поле, однако это неt не добавляет места для текста, который должен быть выше, и вызывает проблему с перекрытием заголовка и / или синей рамки.

Примечание: Абзацы внутри рамки могут быть любой длины, поэтому яне знаю высоту и, следовательно, смещение, необходимое для абзаца.

Answer 1

Вы можете удалить стили из .box на мобильном телефоне и добавить их в .content::after.Это позволит использовать любое количество контента в абзацах и соответственно увеличиваться.

html, body {
  margin: 0;
}

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


/* Mobile only styles */
.box {
  height: auto;
  width: auto;
  background: none;
}

.contents::after {     
  content: ''; 
  display: block;
}

<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>

Answer 2

Вы можете рассмотреть 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>