" Bottom : 0px ; " not working Nor " position : sticky ; " working

Question

Basically, I want to position the div class i.e the navigation bar "basehead" to the bottom of the parent element i.e "header" and make it sticky at that position so that if the webpage is scrolled, the navigation bar appears at the top at every instant.

    /* Parent Element */
    .header{
        height: 500px;
        background-color: #e260b1;
        position: relative;
    }
    /* Element to be stiked at bottom of parent element */
    .basehead{
        width: 100%;
        background: #333333;
        height: 60px;
        position: sticky;
        bottom: 0px;
    }

Hi and Welcome to SO. please take the [tour] first. Then read [how to ask questions here](https://stackoverflow.com/help/how-to-ask). After that edit the question to meet the guidelines and provide a [repro] for debugging details. — tacoshy, Sep 04 '21 at 16:32

score 0 · Answer 1 · answered Sep 04 '21 at 15:45

0

Try this:

#first you need the set the div element in bottom using

bottom: 0;

no need to put "px" after the value.

Then to set it to a fixed position use

position: fixed;

or you can check this tutorial in w3school about fixed menus https://www.w3schools.com/howto/howto_css_fixed_menu.asp

answered Sep 04 '21 at 15:45

Ammar Talal

28
6

Both of the solutions didn't worked. bottom: 0 didn't changed anything. – sumit saini Sep 04 '21 at 15:47
And I need it to stick to bottom not fix. – sumit saini Sep 04 '21 at 15:48
As i understand from you ques is that you want the div to be visible in the page even if the user scroll down right? – Ammar Talal Sep 04 '21 at 15:58
Yes, but should be visible at the top, not at the bottom when scrolled and when at the top of the webpage, then it should be shown in the bottom of the parent element. – sumit saini Sep 04 '21 at 16:05

score 0 · Answer 2 · answered Sep 04 '21 at 16:11

When you are using position:sticky; it means it will stay sticky to its parent element. So consider nesting the .basehead element at the top of the <body> tag, if you want the element to appear on top of all other elements when you scroll.

HTML:

<body>
  <div class="basehead">*Your content here*</div>
</body>

CSS:

.basehead{
  position: sticky;
  top: 0;
}

Here, I provide a link to see how this works.

Dickens A S · Answer 3 · 2021-09-04T16:46:52.567

The outer div does not have any content to make it scroll, to make the html work we must make the outer div have some minimum height like

.header {
   min-height: 1000px;
}
.baseheader {
   position:sticky; top:0;
}

<div class="header">
  <div class="baseheader">HEADER</div>
</div>
<p>some content 1</p>
<p>some content 2</p>
<p>some content 3</p>
<p>some content 4</p>
<p>some content 5</p>
<p>some content 6</p>
<p>some content 7</p>
<p>some content 8</p>
<p>some content 9</p>
<p>some content 10</p>
<p>some content 11</p>

The inner div will not pin to bottom unless a sibling element pushes it down so put a tag above it to push it down with a min-height

.header {
   min-height: 1000px;
}
.baseheader {
   position:sticky; bottom:0;
}

<div class="header">
  <div style="min-height:1000px"></div>
  <div class="baseheader">FOOTER</div>
</div>
<p>some content 1</p>
<p>some content 2</p>
<p>some content 3</p>
<p>some content 4</p>
<p>some content 5</p>
<p>some content 6</p>
<p>some content 7</p>
<p>some content 8</p>
<p>some content 9</p>
<p>some content 10</p>
<p>some content 11</p>

use the heights properly, if the total page height is 2000 or 3000, then only you will see the difference

so put some content below the main tag which make the screen really big more then 2000 px or more

When you keep scrolling the some content 1 to 10 will push the pinned item based on the screen or page height

The navigation bar is stick to the parent element only not the whole webpage. When the outer div ends while scrolling, the navigation bar also goes with it. — sumit saini, Sep 04 '21 at 16:31
yes, that is correct, the above code does the same, I have given both bottom and top, you can use which ever you want, the pinned item will start scrolling when the height ends — Dickens A S, Sep 04 '21 at 16:33
if you accept this as an answer, then it would close this topic :) — Dickens A S, Sep 05 '21 at 15:34

" Bottom : 0px ; " not working Nor " position : sticky ; " working

3 Answers3