Home/ Questions/Q 8412895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:47:36+00:00

The best way I can explain the effect is by this site’s example… http://www.optimus2020.com/

  • 0

The best way I can explain the effect is by this site’s example…

http://www.optimus2020.com/

Any ideas? Its a neat trick.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like the ‘panel’ has been given position: fixed; and placed behind the main content using z-index. The scrolling content has a bottom margin/padding equal to the height of the panel. With this technique the browser will scroll ‘past’ the content, revealing the underlying panel.

    Personally I think it’s a little strange, but that’s just me.

    Code example

    <html>
    <head><title>Test</title></head>
    <body>

        <style type="text/css">
            #content {
                position: relative;
                z-index: 10;
                height: 1000px;
                background: #fff;
                margin-bottom: 100px;
            }

            #panel {
                z-index: 1;
                width: 100%;
                height: 100px;
                background: #00f;
                color: #fff;
                position: fixed;
                bottom: 0;
            }
        </style>

        <div id="content">Content</div>
        <div id="panel">Panel</div>

    </body>
</html>
    • 0