为什么div预览，尽管他的位置被设置为相对出现在另一个div?

Question

我将复制粘贴所有的代码，这样你就可以检查所有的代码并了解问题所在。谢谢你。

我只是想让它出现在前面的div下面。就像它应该的那样，因为这个问题不仅出现在这个div上，而且出现在其他所有的div上。

.presentazione
{
position: relative;
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;
}

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

Answer 1

如果我理解正确的话，你的问题是你在presentazione元素上有top属性，这使得元素从页面顶部移动100px而不推动其他元素。

如果你想让它与顶部有一个100px距离，最好使用margin-top: 100px。

我从该类中删除了top属性，它似乎是正确的。请看下面:

.presentazione {
position: relative;
width: auto;
height: auto;
margin-top: 100px; /* changed from top to margin-top */
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: 200px;
height: 200px;
}

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

Answer 2

您的.presentazionediv的位置设置为relative和top:100px，因此其他元素的行为就像它仍然在其原始位置，因此您看到重叠，您可以尝试margin-top:100px而不是top:100px，它将起作用。更多关于相对定位的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/position