フルスクリーンの「偽の」枠を作成する

Question

フルページのウェブサイトに10pxの白い枠線を追加したいとします。私はフルスクリーンイメージスライダを作成するコードを持っています。コードは高さ/幅をコントロールしているので、機能を損なうことなくボディや親のdivにパディング/マージン/ボーダーを追加できないようです。

私は代わりに不正行為をして、外側を囲む枠線を作成し、固定位置にしてコンテンツの上部に配置したいと考えています。擬似要素または他の技法を使用して（異なるスクリーンおよびモバイル上で動作する必要がある）。

HTML

<div id="main"> 
    ... Wordpress loop with images/posts ... 
</div> 

誰かが

HTML

<div id="border-overlay"></div> 

CSS

#border-overlay { 
    position:absolute; 
    z-index: 999; 
    top:0;     /* Position in the top-left. */ 
    left:0; 
    width: 100vw;   /* Fill the viewport. */ 
    height: 100vh; 
    box-sizing: border-box; /* Include border in width/height. */ 
    border: solid 10px white; 
} 

を追加することを示唆しかし、私は私ので、ページ上のボタンに、このdiv要素を通じてクリックできません他のすべての上に位置する必要があります。

EDIT - 私はちょうどあなたが＃ボーダー・オーバーレイにスタイルpointer-events: none;を追加することを意味してください、私はまだツルツル/

Answer 1

内のコンテンツをスクロールすることができます外側の周り偽の国境に簡単な方法を探していますか？

CSSプロパティのpointer-eventsを使用すると、特定のグラフィック要素がマウスイベントのターゲットになる可能性のある環境（存在する場合）を制御できます。このプロパティが指定されていない場合、visiblePainted値と同じ特性がSVGコンテンツに適用されます。