Question

请考虑以下小提琴。我试图在标注的底部创建一个带有阴影的箭头。这是有效的：

但是，如果我想通过设置根的左/上/宽度来移动对话框。

left: 9px;
position: absolute;
top: 36px;

然后：箭头不在位置之后。我可以看到处理此问题的方法是将after：元素设置为position: relative;top: 100%。但是，一旦我这样做，形状箭头就会被打破？

无论如何我能处理这个，所以箭头位置是相对于盒子大小和位置的吗？

Answer 1

尝试this。

我所做的就是在你想要的那个周围放置一个相对定位的div，这就是你移动的div。根据{{3}}，只要有一个祖先div定位，你的绝对定位就会从祖先的位置开始。

HTML：

<div class="positioner" style="position: relative; top: 200px;">
    <div class="inline-popup"></div>
</div>

Answer 2

我通过将箭头上的左侧位置更改为50％而不是固定的px来完成此操作。

left: 50%;

h / t http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 3

您应该将此箭头保持在绝对位置，这样您就可以在任何地方轻松设置它。

要将其从下往上移动，请将顶部位置和反向框阴影移动到例如：
http://jsfiddle.net/vT4rj/1/
然后改变边界：
http://jsfiddle.net/vT4rj/3/

.inline-popup:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.30);
    content: "";
    height: 18px;
    left: 176px;
    position: absolute;
    top: -9px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 18px;
}

带投影的Css箭头

3 个答案: