3

基本的に、スクロールバーを含むページ上のすべてをカバーするオーバーレイ div を表示したいと考えています。

ページのスクロールバーの上に固定要素が表示されることはありますか? スクロールバーの z-index を -1 に設定しようとしましたが、明らかにうまくいきません。

4

2 に答える 2

7

これは不可能ですが、単純な代替方法は body 要素のスクロールバーをオフにして、代わりに内部要素に導入することです。

CSS:

/* these three elements are sized to fit the screen */
html, body, .content-wrapper {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    overflow-y: hidden; /* no scrollbars on the body */
}
/* this element gets the scrollbars */
.content-wrapper {
    overflow-y: auto;
}

html:

<html>
    <body>
        <div class='content-wrapper'>
            <!-- put your content here -->
        </div>
    </body>
</html>

これで、ページは以前とまったく同じように見えますが、スクロールバーの上に要素を配置できます。

ここに例があります。

于 2015-12-10T08:41:25.000 に答える
2

いいえ、html 要素はブラウザーのクロム (スクロール バーなど) ではレンダリングできません。

ページのレンダリング方法の詳細については、この記事Web ブラウザー エンジンをお読みください。

また、Z-index を使用すると、数値が小さいオブジェクトは数値が大きいオブジェクトの背後にあります。多かれ少なかれ、詳細についてはCSS 仕様を参照してください

于 2013-05-03T18:27:32.750 に答える