为何设置position: relative的preview div会出现在其他div内部？

你的问题出在.presentazione的position: relative搭配top: 100px的设置上——相对定位的top只是让元素自身向下偏移，但它在文档流里的原始占位仍留在顶部位置，后续的.preview会跟着这个原始占位排列，视觉上就会显得它跑到了.presentazione的内部区域。

把.presentazione里的top: 100px换成margin-top: 100px即可，这样既实现元素下移的效果，又能推动后续元素跟着同步下移，.preview就能正常显示在它下方了。

修改后的CSS代码：

.presentazione
{
  position: relative;
  /* 替换top为margin-top */
  margin-top: 100px;
  width:auto;
  height:auto;
  text-align: center;
  font-size:30px;
  border: 2px solid red;
}

.sottofondo
{
  position: relative;
  display: inline-flex;
  width: auto;
  height: auto;

  border: 2px solid grey;
}

.messaggio
{
  position: relative;
  width: auto;
  height: auto;

  border: 1px solid green
}

.sottofondo .icona
{
  position: relative;
  width: auto;
  height: auto;
  border:1px solid pink;
}


.preview
{
  position: relative;
  width: auto;
  height: auto;
}

HTML结构无需修改：

<div class="presentazione"> MESSAGE </br> OTHERS THINGS, BLA BLA BLA
  <div class="sottofondo">
    <div class="messaggio"> ANOTHER THING </div>
    <div class="icona"> <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
  </div>
</div>

<div class="preview"> PROBLEM HERE </div>

内容的提问来源于stack exchange，提问作者TradiX- 98