0

効果を説明できる最良の方法は、このサイトの例です...

http://www.optimus2020.com/

何か案は？その巧妙なトリック。

4

1 に答える 1

2

position: fixed;を使用して「パネル」が指定され、メイン コンテンツの背後に配置されているように見えz-indexます。スクロールするコンテンツには、パネルの高さに等しい下マージン/パディングがあります。この手法を使用すると、ブラウザはコンテンツを「過ぎて」スクロールし、下にあるパネルを表示します。

個人的には少し奇妙だと思いますが、それは私だけです。

コード例

<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>
于 2012-08-21T15:29:00.037 に答える