Search code examples
htmlcsspositioncss-position

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


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


Solution

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