Div overlaps using property top

Question

Div overlaps using property top

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Well, I'm developing a web page, and I have something like 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 and does not follow the correct flow. I thought that this happened when using the position: absolute ...

html5 html css3 css

asked by Jogofus 03.06.2017 в 22:01

source

2 answers

0

With this it would serve:

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

}

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

answered by 03.06.2017 в 22:26

Friendly function between classes Add serialized data to a JTable JTable

score 0 · Accepted Answer

The best option to do what you want is to use the property margin , with that you're not positioning it, you're just putting a margin at the top of your element, this will make it not superposition I leave 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 you