在可滚动 <div> 内的绝对 <div> 周围设置空间/边距答案

【问题标题】：Set space/margin all around an absolute <div> which is inside a scrollable <div>在可滚动 <div> 内的绝对 <div> 周围设置空间/边距
【发布时间】：2016-09-15 21:45:37
【问题描述】：

我想在可滚动的<div> 内设置<div> 和position:absolute 周围的边距，以便在内部div 和可滚动区域边界（右侧和底部）之间留出一些空间。

我尝试过这样的事情，但没有运气：

<div style="overflow:scroll">
  <div style="position:absolute; margin-right:100px; margin-bottom:100px">DRAG ME</div>
</div>

在这里演示： https://jsfiddle.net/ayft01x0/

只有 margin-bottom 有效，并且仅在 Chrome 中有效。

您还可以想象，在可缩放 div 中还有其他元素，即使它们被“拖动我”元素的边距（在使用 CSS 边距时应该是这种情况）所掩盖，它们也应该保持可点击状态。

我正在寻找一种适用于 Webkit 浏览器的纯 CSS 解决方案。
有什么想法吗？

【问题讨论】：

标签： css

【解决方案1】：

绝对定位改变了边距的工作方式，但你可以通过边框获得你想要的效果：

我们在左边和右边添加一个边框。这会干扰您在可拖动元素上已有的边框，因此我们添加了一个伪元素来处理设计。伪元素覆盖了“拖我”文本，因此我们在该内容周围添加一个包装器并修复 z 索引

这是an update to your fiddle，这是基本css的sn-p

#container {
  position: relative;
  width: 200px;
  height: 200px;
  border: solid 1px black;
  background-color: white;
}
#box {
  position: absolute;
  border-right: 100px solid transparent; /* changed this */
  border-bottom: 100px solid transparent; /* changed this */
  outline: 1px solid red; /* just for demo purposes */
  width: 80px;
  height: 80px;
  left: 50px;
  top: 50px;
  /* dropped the border and background styles */
}
#box span { /* added this element */
  position: relative;
  z-index: 1;
}
#box:before { /* added this element */
  content: '';
  position: absolute;
  z-index: 0;
  width: 80px;
  height: 80px;

  /* placement adjusted to take the border into account */
  left: -2px;
  top: -2px;

  /* border and background styles moved from #box to here */
  border: solid 2px #666;
  border-radius: 10px;
  background: #ccc; /* shaved off a couple bytes by dropping the -color */
}

<div id="container" style="overflow:scroll">
  <div id="box">
    <span>DRAG ME</span><!-- added this wrapping element so that it can get a z-index -->
  </div>
</div>

请注意，我保留了可拖动框的初始位置，但实际上我可能会这样做。负边距只是元素尺寸的一半。这样，如果您调整 #container 的大小，您就不必重新计算 #box 的起始位置

#box {
    ...
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
}

【讨论】：

智能解决方案！但是，您添加的边框也是可点击和可拖动的，并且可以防止用户单击下面的其他元素，这与 CSS 边距不同......我想我可以通过为页面的每个元素设置 z-indexes 来解决它，但这很复杂事情有点。正在寻找更简单的解决方案。顺便说一句，50% 的好把戏！
这是一个额外的空间不可点击的版本jsfiddle.net/enry/633gb100（添加一个拖动元素，设置样式，js 监视它的点击）。不能说这是否适用于“下面的其他元素” - 这不是你的问题，而且可能是一个单独的问题；）希望这有帮助！
你说得对，我的原始问题中没有指定，只是更新了它。我找到了使用 CSS 指针事件属性的解决方法。不是最好的方法，因为我必须封装每个 div，但它可以工作。将在几秒钟内发布。非常感谢您的帮助！
不错，pointer-events（也是我最新小提琴中的解决方案）是一种方便的钝器，只要您不需要支持 IE8

【解决方案2】：

有一种解决方法是使用带有内部填充的封装 div，并使用 pointer-events 属性使其对鼠标交互透明。

<div style="overflow:scroll">
  <div style="position:absolute; padding-right:100px; padding-bottom:100px; pointer-events:none">
    <div style="pointer-events:all">DRAG ME</div>
  </div>
</div>

在这里演示： https://jsfiddle.net/1axtonez/

【讨论】：

【解决方案3】：

实现这一点的最简单方法是创建一个覆盖框的不可见 CSS ::before 伪元素加上一个 padding，并使用 pointer-events 属性使其对鼠标交互透明：

div.box::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-right: 100px;
    padding-bottom: 100px;
    pointer-events: none;
    /* background-color: rgba(255,0,0,0.2); // to understand what is going on */
}

在这里演示： https://jsfiddle.net/rmxwwyno/

请注意，当该框的 overflow 属性未设置为 visible 时，它不起作用。

【讨论】：