iframeまたはライブラリを使用せずにクリッピング表示ウィンドウ領域を作成するにはどうすればいいですか？

Question

私は、視覚化されたデータポイントを表す他のdiv要素を動的に表示したい境界のあるdivを含むプロジェクトを持っています。要素を作成してjavascriptを使用して配置するのに問題はありませんが、現在は「表示div」内に閉じ込めようとしています。私はいくつかのクリッピングとマスクのアイデアを見てきましたが、私はそれが適用可能であるかどうかはわかりません（実際のイメージを扱う多くの人がここにいます、私はそうではありません）。

CSS：

#info { 
    width:100px; 
    height:100px; 
    float:left; 
    display:inline-block; 
    border: 2px solid blue; 
} 

#display { 
    width:400px; 
    height:300px; 
    display:inline-block; 
    border: 1px solid black; 
} 

#data { 
    position:absolute; 
    width:100px; 
    height:100px; 
    border-radius:100px; 
    background:green; 
    left:70px; 
    top:30px; 
} 

HTML：以下は、私は建物だページの単純化した表現である

Div Window Test<br> 
<br> 
<div id="info">Info Sidebar<br></div> 
<div id="display"> 
    <div id="data"></div> 
</div> 

あなたが見ることができるように、黒囲ま表示領域が存在する、とディスプレイ内に描画されたデータ点を表す浮遊する緑色の円形要素。図示のように、データ点divは部分的にディスプレイの外側にある。さまざまなサイズと場所のデータポイントがたくさんあります。ディスプレイの内側にはいくつかありますが、いくつかの外部（さらにはブラウザウィンドウを通過することもあります）です。私がしたいのは、表示divの境界内でレンダリングされているものだけを表示するようにデータポイントを厳密にマスク/マスクすることです。 CSSやマスクを使ってこれを行う簡単な方法はありますか？

Answer 1

これはあなたの探しているものですか？

以下のサンプルでは、​​絶対配置された子が#display要素に関連し、overflow: hidden;がオーバーフローした部分を切り捨てるように、position: relative;を追加しました。

#info { 
 
    width:100px; 
 
    height:100px; 
 
    float:left; 
 
    display:inline-block; 
 
    border: 2px solid blue; 
 
} 
 

 
#display { 
 
    width:400px; 
 
    height:300px; 
 
    display:inline-block; 
 
    border: 1px solid black; 
 
    position: relative;    /* added */ 
 
    overflow: hidden;    /* added */ 
 
} 
 

 
#data { 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:100px; 
 
    background:green; 
 
    left:70px; 
 
    top:-30px; 
 
}

Div Window Test<br> 
 
<br> 
 
<div id="info">Info Sidebar<br></div> 
 
<div id="display"> 
 
    <div id="data"></div> 
 
</div>