Why the div preview, despite his position is set on relative appears inside the other div?-CodePudding

I am gonna to copy paste all the code, so you can check everything and understand what it's the problem. Thank you.

I just wanted to make it appear under the previously div. Just like it shoud be, because this problems not only appears with this div, but with everything else.

.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 > MESSAGE </br> OTHERS THINGS, BLA BLA BLA
  <div >
    <div > ANOTHER THING </div>
    <div > <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
  </div>
</div>

<div > PROBLEM HERE </div>

CodePudding user response：

Your problem if I understood correctly is that you have on your presentazione element the top property which this makes the element to move 100px from the top of the page without pushing the other elements.

If you want it to have a 100px distance from top better use margin-top: 100px.

I removed the top property from that class and it seems to be correct. Check it out below:

.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 > MESSAGE </br> OTHERS THINGS, BLA BLA BLA
  <div >
    <div > ANOTHER THING </div>
    <div > <img src="Icons/CuoreV.png" style="width:30px; height:30px;"/></div>
  </div>
</div>

<div > PROBLEM HERE </div>

CodePudding user response：

Your .presentazione div's position is set to relative and its top:100px, so other elements are behaving like its still in its original position, therefore you see that overlap, you can try margin-top:100px instead of top:100px and it will work. more info on relative positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position