如何调整我的 CSS 以确保箭头与弹出容器显示在同一层？

Question

我尝试像这个例子一样制作弹出容器

但它显示了这个错误的层或其他东西

这是我的代码：

HTML：

<div class="popup-container arrow-top ">

CSS：

.popup-container {
    display: none;
    padding: 20px 10px 0 0;
    position: absolute;
    margin: 0 auto;
    z-index: 999;
    top: 100%;
    right: 50%;
    border-radius: 10px 0px 10px 10px;
    background-color: #FFFFFF;
    box-shadow: rgb(170, 170, 170, 0.6) 0 1px 14px
}

.popup-container:before {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(90deg) skewX(45deg) scaleY(cos(45deg));
  box-shadow: 0 1px 14px rgba(0,0,0,.2);
  background-color: #FFFFFF;
  position: absolute  ;
  z-index: 999;
}
.popup-co`ntainer.arrow-top:before {
  right: -3px;
  top: -4px;
}

Answer 1

我相信这就是您要实现的目标，您的代码很好，但是您需要调整一些值才能使弹出窗口正确显示。

 function showPopup(elem){ let style = elem.querySelector(".popup-container").classList.toggle("show-popup"); }

 body{ background: whitesmoke; }.text-with-popup{ display: inline-block; position: relative; cursor: pointer; }.show-popup{ display: block;important. }:popup-container { display; none: padding; 20px 10px 0 0: position; absolute: margin; 0 auto: z-index; 999: top; calc(100% + 16px): right; 0: width; 100px: height; 100px: border-radius; 10px 0px 10px 10px: background-color; #FFF: box-shadow, rgb(170, 170, 170. 0.6) 0 1px 14px }:popup-container:before { content; "": width; 20px: height; 20px: transform; rotate(90deg) skewX(45deg) scaleY(cos(45deg)): background-color; #FFF: position; absolute: z-index; 999. }.popup-container:arrow-top:before { right; -3px: top; -4px; }

 <div class="text-with-popup" onclick="showPopup(this)"> New Popup With Wrapper <div class="popup-container arrow-top "> <div>