Search code examples
htmlcsspositioncss-positionfixed

HTML position bug

I'm trying to build a slider for a new page. That for im building a small desgin with a fixed header, full width pictureslider, and some other stuff. Now when i added the div with the class inhalt my fixed header is not anymore at the top and div with the name slider ist bigger then 100%

enter image description here

<body>

    <div id="header"></div>
    <div id="sliderContainer">
        <ul class="slides">
            <li>
                <img src="img/clouds-2517653_1920.jpg"/>
            </li>
            <li>
                <img src="img/drop-of-water-2396748_1920.jpg"/>
            </li>
        </ul>
    </div>

    <div class="inhalt">
        <h5>Lorem impsum</h5>
        <p>
        Bacon ipsum dolor amet sirloin kevin boudin ribeye short ribs chicken shank. Turkey ham hock cow prosciutto drumstick.
        Kevin boudin pork loin beef. Pork tongue bresaola, frankfurter pig meatball porchetta boudin bacon ham landjaeger t-bone
        short ribs. Short loin turkey rump jowl pork belly strip steak chicken ground round doner tenderloin salami bacon landjaeger pork
        loin pancetta. Cow turkey doner landjaeger ham hock rump.
        </p>
    </div>

</body>

CSS : 

    ul {
    margin: 0;
    padding: 0;
}

#header {
    position: fixed;
    width: 100%;
    height: 150px;
    background-color: #194696;

}

#sliderContainer {
    position: relative;
    max-width: 1920px;
    height: 600px;
    top: 300px;
    background-color: darkgray;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
}

#slides {
    float: left;
}

.inhalt{
    position: relative;
    margin: 0 auto;
    height: 600px;
    max-width: 800px;
}
Solution

  • So you are another casualty of position: fixed;

    A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days. For more details read this

    Once you give position fixed property to an element, then it no longer effects other elements on the page. Similar to position absolute.

    So when you give #header {position: fixed; top: 0; height: 150px;} then you are declaring that keep the header at the top of the browser at all times and the height of this header will be 150px. But now the other elements of the page will not be able to see the #header. If you add a another element, that element will start from the start of the browser (top) and that will be behind your header.

    So, as a soft fix, you need to give the new element (slider) top: 150px; or margin-top: 150px;. This means that the slider will start 150px from the top of the browser. I say 150px because that is the height of your header. So the slider will start below the header and you will have no problems.

    Refer this website. They have done the same thing that you are looking for, but they are using margin-top, which is better than top.

    SOLUTION: 

    #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px;
    background-color: #194696;
}

#sliderContainer {
    position: relative;
    max-width: 1920px;
    height: 600px;
    margin-top: 150px;
    background-color: darkgray;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
}