Question

我利用了我在其他地方找到的边界技巧，基本上将绝对定位的DIV覆盖在内容div上。虽然没有与原始内容进行交互，即突出显示文本或点击按钮，但它确实产生了效果。

.stamp-border {
  border-width: 10px;
  border-style: solid;
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  z-index: 0;
}

我认为添加z-index应解决问题，尽管它似乎没有任何影响。我在监督什么？

Here's a fiddle

Answer 1

只需添加

pointer-events: none

小提琴：

http://jsfiddle.net/KRWVA/2/

Answer 2

目前还不清楚你在寻找什么。您目前有一个因覆盖而无法点击的div。如果您需要，可以使用我在评论和pointer-events: none中说的user-select: none;。请注意，user-select必须以供应商为前缀，以保持兼容性。

如果您确实希望它可以点击，您可以完全摆脱叠加层。同样的风格可以简单地完成：

<div class="post-cta">
  <p>
    Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit. Omnis consequatur deleniti
    earum sed distinctio reiciendis vero sapiente 
    tenetur non natus?  
  </p>
  <input type="submit">
</div>

<强>的CSS：

.post-cta {
  background: white;
  z-index: 1;
  padding: 15px;
  border: 10px solid black;
  margin: 10px;
}

<强> Live demo of both solutions (click).

Answer 3

z-index仅对position:absolute/position:relative元素生效。由于您的文字和按钮不是position:absolute/position:relative元素。 .stamp-border将始终位于它们之上。此外，chlid元素的z-index不能小于父元素。

您可以创建一个“容器”div作为.post-cta和.stamp-border的父级。如下所示。

 <div class="container">
    <div class="stamp-border"></div>
    <div class="post-cta">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur deleniti earum sed distinctio reiciendis vero sapiente tenetur non natus?</p>
    <input type="submit">
    </div>
</div>


//CSS Part

.container{
    position:relative;
}

Answer 4

无需担心...... 只需添加..

pointer-events: none

在你的CSS中

CSS边界技巧使DIV无法点击

4 个答案: