How to make the fixed position in the top of the relative?

Question

What are the position in CSS and what they mean and do ? I had put the first div fixed and the second <div> relative .

So the second came up of the first when I scroll the page and I don't want this to happen , I want the first be in the top .

Well I give the second div a relative position because I need to control another <div> inside it .

<div class="up"></div>
<div class="down"></div>

And css:

.up{
   Position:fixed; 
 }

.down{
   Position:relative;
}

Answer 1

you should also give a value to them :

.up{ 
    Position:fixed;  
    top:0px;
    left:0px;
}

.down{
       Position:relative;
}

position relative is used for parent elements when you want to use fixed or absolute ( or ... ) positions for children elements.
the top and left properties can also be right or bottom .
if you dont want the element to stay on its position when you scroll , use absolute instead of fixed
CSS position Property

Answer 2

.up {
    position: fixed;
    z-index: 1;
}
.down {
    position: relative;
    z-index: 0;
}

Z-index attribute let us bring the .up above the .down

Answer 3

when you set position to fixed or sticky you need to set the top or left or right or bottom property. The top, right, bottom, and left properties are used to position the element. for example, if you want to set div#up to top-right of the page,

.up{
   position:fixed; 
   top: 0;  
   right: 0;
 }

.down{
   position:relative;
}