如何在不使用 iframe 或库的情况下创建剪裁显示 window 区域？

Question

我有一个包含带边框的 div 的项目，我想在其中动态显示其他一些 div 元素，这些元素表示可视化数据点。我可以轻松创建元素并使用 javascript 定位它们，但我现在试图将它们限制在 "display 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 部分位于显示范围之外。会有很多很多不同大小和位置的数据点——一些在显示器内部，一些在显示器外部（甚至一些在浏览器之外 window）。我想以某种方式 constrict/mask 数据点仅显示显示 div 边界内呈现的内容。有使用 CSS 或掩码的简单方法吗？

Answer 1

这是你要找的吗？

在下面的示例中，我添加了 position: relative; 以使您的绝对定位子元素与 #display 元素相关，并添加了 overflow: hidden; 以切断任何溢出的部分。

#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>

如何在不使用 iframe 或库的情况下创建剪裁显示 window 区域？

How to create a clipping display window area without using an iframe or a library?

html

javascript

css

mask