Put div in the background

Question

I need div 01 not interfere in the positioning of the other Ivs, such as div 03 for example, or is that div 03 comes right after div 02, that the Ivs follow the normal page flow without needing div 01, div 01 is a bottom div that does not interfere in the position of the others, that looks like this: (I did a trick to show this and if I used the page would be all destroyed)

It’s as if div 01 didn’t even exist for the other Ivs, as if it were a background image placed in the body attribute'!

How do I do that?

--------------- Solved ----------------

I resolved so:

Div 02 was inside div 01, I put div 02 out and left div 01 separate from div 02:

Before:

<header>
    <div id="topo">
    </div>
</header>

Afterward:

<div id="fundo">
</div>
<header>
</header>

I added these attributes in the background:

position:absolute;
z-index:-1;

Model of how it turned out:

And it worked, thank you all!

Answer 1

The ideal would be to give me an answer based on your code, but as you did not post (it is the tip for correction), I will tell you some solutions.

You can have several types of positionin the CSS.

Static

Follows the normal flow of <div>, that is, works with blocks.

Relative

Accepts properties top, bottom, left and right for positioning.

Absolute

Works with plans of <div> and overlaps. That is, it does not ignore the physical! It maintains the law that two bodies cannot occupy the same space and therefore one overlaps the other.

Fixed

Basically the same thing as the Absolute, but the element is fixed all the time on the screen. An example are those popups chatos that overlap all elements and stays fixed despite you use the scroll.

Now another topic!

To work with the property in the overlay, we use the property z-indez from 0 to X and defines which element will be on top. Example:

HTML

<div id='primeiraDiv'> ... </div>
<div id='segundaDiv'> ... </div>
<div id='terceiraDiv'> ... </div>

CSS

#primeiraDiv{
z-index: 0;
}

#segundaDiv{
z-index: 1;
}

#terceiraDiv{
z-index: 2;
}

Answer 2

I resolved so:

Div 02 was inside div 01, I put div 02 out and left div 01 separate from div 02:

Before:

<header>
    <div id="topo">
    </div>
</header>

Afterward:

<div id="fundo">
</div>
<header>
</header>

I added these attributes in the background:

position:absolute;
z-index:-1;

And it worked, thank you all!

Answer 3

Have you tried the Divs z-index? In css

#div1{
  z-index:20;
}
#div2{
  z-index:30;
}

This positions one over the other. The largest number positions the div over