locked
Add footer on-top of everything RRS feed

  • Question

  • User-1188570427 posted

    Hello,

    I want to put my footer ontop of everything. Meaning if the page scrolls, that everything in the background is behind the footer.

    I thought the ; would do it, but that did not work.

    .footer {
        z-index: -9;
        height: 60px;
        ;
        background-color: black;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }

    Thursday, June 4, 2020 3:12 AM

Answers

  • User-1188570427 posted

    PaulTheSmith

    Works for me

    <html>
    <head>
    <style>
    .footer {
        z-index: -9;
        height: 60px;
        ;
        background-color: black;
        color: white;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }</style>
    </head>
    <body>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    <div class='footer'>
    This is the footer
    </div>
    </body>
    </html>

    save the code as test.html and open with your browser.

    Can you post a working sample that I can open in my browser which does not do what you are expecting? ("did not work" is not a lot of information!)

    It sure did for me too with the text file as you discussed.

    Let me look at my code again. Something in my asp.net core dev express project template must be overriding it. 

    This worked!

    I changed the z-index to 1 and the middle content is now behind as it scrolls and the footer is fixed!

    Thanks, everyone!

    .footer {
        z-index: 1;
        height: 60px;
        ;
        background-color: black;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 5, 2020 12:07 AM

All replies

  • User303363814 posted

    Works for me

    <html>
    <head>
    <style>
    .footer {
        z-index: -9;
        height: 60px;
        ;
        background-color: black;
        color: white;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }</style>
    </head>
    <body>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    <div class='footer'>
    This is the footer
    </div>
    </body>
    </html>

    save the code as test.html and open with your browser.

    Can you post a working sample that I can open in my browser which does not do what you are expecting? ("did not work" is not a lot of information!)

    Thursday, June 4, 2020 5:32 AM
  • User288213138 posted

    Hi tvb2727,

    tvb2727

    I want to put my footer ontop of everything. Meaning if the page scrolls, that everything in the background is behind the footer.

    Do you want to suspend the footer on everything? If so, then you should set z-index to a positive number.

    The z-index property specifies the stack order of an element.

    Here a demo for you as a reference. I set z-index: -1, then the picture is below the text, if z-index: 1; then the picture is above the text.

    <style>
            img {
                ;         
                z-index: -1;
            }
        </style>
    
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <img src="../Images/27.PNG">
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>

    The result:

    Best regards,

    Sam

    Thursday, June 4, 2020 5:42 AM
  • User-1188570427 posted

    Hi tvb2727,

    tvb2727

    I want to put my footer ontop of everything. Meaning if the page scrolls, that everything in the background is behind the footer.

    Do you want to suspend the footer on everything? If so, then you should set z-index to a positive number.

    The z-index property specifies the stack order of an element.

    Here a demo for you as a reference. I set z-index: -1, then the picture is below the text, if z-index: 1; then the picture is above the text.

    <style>
            img {
                ;         
                z-index: -1;
            }
        </style>
    
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <img src="../Images/27.PNG">
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>
        <p>AAAAAAAAAA</p>

    The result:

    Best regards,

    Sam

    In your example, I want the text to be behind the picture!

    So I want the footer always to be fixed at the bottom and everything else behind it.

    Friday, June 5, 2020 12:02 AM
  • User-1188570427 posted

    Works for me

    <html>
    <head>
    <style>
    .footer {
        z-index: -9;
        height: 60px;
        ;
        background-color: black;
        color: white;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }</style>
    </head>
    <body>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    <div class='footer'>
    This is the footer
    </div>
    </body>
    </html>

    save the code as test.html and open with your browser.

    Can you post a working sample that I can open in my browser which does not do what you are expecting? ("did not work" is not a lot of information!)

    It sure did for me too with the test file as you discussed.

    Let me look at my code again. Something in my asp.net core dev express project template must be overriding it. 

    Friday, June 5, 2020 12:05 AM
  • User-1188570427 posted

    PaulTheSmith

    Works for me

    <html>
    <head>
    <style>
    .footer {
        z-index: -9;
        height: 60px;
        ;
        background-color: black;
        color: white;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }</style>
    </head>
    <body>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    This is not in the footer<br/>
    <div class='footer'>
    This is the footer
    </div>
    </body>
    </html>

    save the code as test.html and open with your browser.

    Can you post a working sample that I can open in my browser which does not do what you are expecting? ("did not work" is not a lot of information!)

    It sure did for me too with the text file as you discussed.

    Let me look at my code again. Something in my asp.net core dev express project template must be overriding it. 

    This worked!

    I changed the z-index to 1 and the middle content is now behind as it scrolls and the footer is fixed!

    Thanks, everyone!

    .footer {
        z-index: 1;
        height: 60px;
        ;
        background-color: black;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 5, 2020 12:07 AM