0

HTML5/CSS3
A question for better understanding coding, Newbie

I fixed my header on top of the portview. It worked perfectly, but from now on i have to correct all following sections/divs to bring it in the position on the screen, i want to have it.
This behavior makes sense to me, because the position:fixed/absolute takes the element out of the flow.
But... is there a way to come into the normal flow again, so that i don´t need to tell every element with position: relative or absolute where it should stay? Is it a fact, that as soon i use position:fixed/absolute, i have to correct all following content/sections/divs?
How do you deal with such a situation?
This is not a big issue for me, but it blows up my code and makes it more ugly.If it is not unnecessary, i would like to aviod it...

Code-trix
  • 5
  • 2

2 Answers2

0

you can position absolute according to parent position relative.

<div style="position:relative;background:#ccc;width:400px;height:400px;">
  <div         style="position:absolute;left:80px;top:50px;width:200px;height:200px;background:#000 ">

  </div>
</div>

position fixed according to window page,elements fix in window's page.

<div style="position:fixed;left:200px;top:200px;background:#000;width:200px;height:200px;">
</div>
Morteza Fathnia
  • 435
  • 3
  • 12
  • 1
    hehe.. i did try it half a day... but it makes "click" in my head now ...it works the way you did say it... thx.. bro... :) – Code-trix May 28 '17 at 20:33
  • the problem was, that i didn´t have a relative reference point (position: relative), so the browser took the rootelement (html), which was the next available point. so i lost all the space (height of the header) for the following containers... as a result i tried to get back the control by giving **ALL FOLLOWING** container a position: property... WHICH WAS THE WRONG WAY TO FORCE THEM INTO THE RIGHT POSITION... – Code-trix May 30 '17 at 11:42
  • are you problem with float & height,probably this link is helpful: https://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el – Morteza Fathnia May 30 '17 at 13:51
0

Just take fixed div in another div and for second one use property: overflow:hidden;

    <div class="parent_fixed_div">
       <div class="fixed_div">

       </div>
    </div>

CSS code:

    .parent_fixed_div{
        overflow:hidden;
    }
    .fixed_div{
        position:fixed;
    }
Amalia
  • 33
  • 2
  • 6