Question

这是fiddle。

我有两个div元素。

<div class="parent">
  <div class="child">
  </div>
</div>

和CSS代码。

.parent {
  height: 20px;
  width: 100px;
  background-color: #080;
  position: relative;
}

.child {
  position: absolute;
  width: 80px;
  height: 200px;
  background-color: #008;
  right: -10px;
  top: 30px;
}

.child:before {
  border-right: 10px solid transparent;
  border-bottom: 10px solid #008;
  border-left: 10px solid transparent;
  top: -10px;
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  left: 50%;
}

如果没有JS，如何定位与.child:before相关的.parent。我知道.parent:before的解决方案，但对我来说并不好。

Answer 1

我认为这就是你要做的事。

我认为你会发现它更强大和可扩展。

＆＃13;

.parent {
  height: 20px;
  width: 100px;
  background-color: #080;
  position: relative;
}
.child {
  position: absolute;
  width: 80px;
  height: 200px;
  background-color: #008;
  left: 50%;
  /* note 50% */
  top: 30px;
  margin-left: -20px;
  /* 2x your arrow size */
}
.child:before {
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #008;
  border-left: 10px solid transparent;
  top: -10px;
  /* your border size */
  margin-left: 10px;
  /* your border-size */
  width: 0;
  height: 0;
  content: "";
  left: 0;
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

Answer 2

您只能将元素absolute放置在与其自身定位的最近父级相关的位置。在你的情况下，那是.child。

如果您的布局中.child和.child:before不相关，为什么不将.child:before放在父元素中，作为.parent:before，还是作为自己的元素？< / p>

或者，如果您的元素在示例中都具有固定宽度，则只需为伪元素提供固定的像素位置。 Demonstration

如何绝对位置：在父元素的父元素之前？

2 个答案: