Home / Questions / 75651
Accepted
Jogofus
Asked: 2020-06-04 12:01:49 +0800 CST 2020-06-04 12:01:49 +0800 CST

Div overlaps using top property

  • 772

Well, I'm developing a web page, and I have something similar to this:

HTML

<section>
 <article class="first">
  <!-- Resto de estructura -->
 </article>

 <article class="second">
  <!-- Resto de estructura -->
 </article>
</section>

CSS:

.first{
 width: 100%;
 height: 300px;
 background-color:blue;
 position: relative;
 top: 100px;
}

.second{
 width: 100%;
 height: 300px;
 background-color:red;
}

The problem is that the article first overlaps on top and they don't follow the correct flow. I thought this happened when using position: absolute...

html

2 Answers

  1. This would do:

    .first{
   width: 100%;
   height: 300px;
   background-color:blue;
   position: absolute;

}

.second{
   width: 100%;
  height: 300px;
  background-color:red;
  top:100px;
  position: absolute;
}
    • 0
  2. Best Answer

    The best option to do what you intend is to use the property margin, with that you are not positioning it, you are simply putting a margin on the top of your element, this will make it not overlap. I leave you the code based on your example:

    .first{
    width: 100%;
    height: 300px;
    background-color:blue;
    margin-top: 100px;
}

.second{
    width: 100%;
    height: 300px;
    background-color:red;
}
     <section>
 <article class="first">
    <!-- Resto de estructura -->
 </article>

 <article class="second">
  <!-- Resto de estructura -->
 </article>
</section>

    I hope it helps

    • 0