在可滚动<div>内部的绝对<div>周围设置空格/边距

Question

我想在<div>内设置一个边距，并在可滚动的position:absolute内设置<div>，以便在内部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解决方案 有什么想法吗？

Answer 1

绝对定位会改变边距的工作方式，但您可以获得边框之后的效果：

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

这里an update to your fiddle，这里是必要的CSS的片段

＆＃13;

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 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/

Answer 3

实现此目的的最简单方法是创建一个不可见的CSS ::before伪元素，该元素覆盖框和padding，并使用{{3}使其对鼠标交互透明property：

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 */
}

在此演示： pointer-events

当该框具有 设置为overflow的{​​{1}}属性时，请注意它无法正常工作。