Question

我在我的网络应用程序中拖放工作得很好，但有一个问题我无法解决：我搜索了周围，我发现了类似的问题，也有一些指的是我的问题的相反，但我无法理解发生了什么。

问题涉及对dragover的视觉效果。在dragover事件中，我添加了一个dragging类，其中有一个:before元素，以覆盖所有正文的方式设置，但事实上它只是覆盖视口，这样如果我滚动窗口，身体的其余部分不覆盖。这是我使用的CSS：

.dragging:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 200;
  background-color: rgba(0,0,0,0.2);
}

我还创建了a jsfiddle to demonstrate the problem;为了简单起见，我将类添加到click事件中。如果你点击黄色的身体它会变得稍暗;如果你向下滚动，你会看到正常的背景重新出现。在我的应用程序中，我无法点击div下方页面的内容，但如果我向下滚动，我可以点击其余内容。

我上面提到的问题的“反面”是有人想要一个div来覆盖视口而不是整个身体，他被建议使用100vh而不是100％，所以我想我有一些东西缺少...

Answer 1

有两种方法可以做到这一点。

一个。一般情况

家长（即.draggable）：

{
  position:relative
}

儿童（即.draggable::before）：

{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

它是一般，因为你的父母可以是任何元素，有任何大小。只要在父级和子级之间没有其他中间定位元素（其中定位意味着具有除默认值之外的集position值 - {{{ 1}};如果存在这样的元素，它将成为父/引用元素。）

湾例外（视口）

有时更有意义的是给孩子一个视口大小，而不是DOM中最接近定位祖先的大小。在这种情况下，您只需要将以下内容应用于子节点（父节点将是视口）：

static

请注意，视口并不总是浏览器窗口。例如，3d变换元素充当其子项的视口。

在您的情况下，一般情况为：https://jsfiddle.net/v7bu6czy/11/

{
  position: fixed;
  top: 0;
  left: 0;
  width; 100%;
  height: 100%;
  /* you could also use right:0; bottom:0;, as above
   * you don't need to set width and height 
   * but, since it was present in your code, I used it
   */
}

$("body").click(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $("body").addClass('dragging');
        console.log('using position:absolute (general solution), ::before height is: ' + window.getComputedStyle(document.querySelector('.dragging'), ':before').height)
    });

body { 
  margin: 0; 
}

.longdiv {
  height: 3000px;
  background-color: yellow;
}

.dragging {
  position: relative;
}
.dragging:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.2);
}

例外情况是：https://jsfiddle.net/v7bu6czy/9/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head lang="en">
</head><body>
<div class="longdiv">

</div>
</body>

$("body").click(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $("body").addClass('dragging');
        console.log('using position:fixed, ::before height is: ' + window.getComputedStyle(document.querySelector('.dragging'), ':before').height)
    });

html, body, document { height: 100%; margin: 0; }

.longdiv {
  height: 3000px;
  background-color: yellow;
}

.dragging:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 200;
  background-color: rgba(0,0,0,0.2);
}

覆盖dragover的整页

1 个答案:

一个。一般情况

湾例外（视口）