Question

我一直在使用InfoBox文档和这篇文章here来尝试让InfoBox看起来与标准InfoWindow几乎相同，作为一些轻微的外观变化的起点。

正如您在this fiddle中所看到的，将InfoBox连接到标记的“存根”仍位于信息框的顶部。

我试图在backgroundPosition参数中使用boxStyle（在您第一次打开小提琴时注释掉），但它不起作用。

     boxStyle: {
        backgroundImage: "url('https://directory.fsf.org/w/extensions/SemanticDrilldown/skins/down-arrow.png')",
        backgroundRepeat: "no-repeat",
        /*backgroundPosition: "center bottom",*/
        opacity: 0.75,
        width: "280px"
    },

如何将存根向下移动到底部中心而不是左上角？

Answer 1

使用:after选择器将其添加到信息框。喜欢这个

#infobox:after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 125px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #333 transparent;
    display: block;
    width: 0;
}

请参阅Demo

P.S。我没有从你的JS中删除旧的。这就是为什么你仍然会在屏幕上看到它。

根据OP的要求提供支持文档

有很多关于CSS选择器的文档，特别是:before和:after选择器。其中一些，可能是最基本的信息，请参见w3schools。

SmashingMagazine还有更多详细信息和这个概念的用处。

通过使用选择器攻击元素，您还可以根据行为进行设置。例如:hover，:focus，:active，:inactive，:empty和:blank

通过使用边框绘制一个小矩形并剪切边框的一边来构建实际三角形。有关如何构建CSS三角形的CSS技巧，请参阅this link。

至于选择:before或:after，对于您应该使用哪一个，没有明确的解释。根据您使用的那个，您必须相应地重新定位。在某些特定情况下，例如通过CSS选择器添加字体真棒图标，如果要将它添加到:before选择器之前将它添加到它所附加的元素或使用{{1} }选择器，如果它将继续元素

Answer 2

您需要在.infoBox上设置背景位置，并将margin-top更改为margin-bottom上的#infobox。

.infoBox {
    background-position: center bottom;
}

#infobox {
    margin-bottom: 8px;
}

请参阅updated fiddle

在标记上方创建InfoBox窗口，并将存根放在正确的位置

2 个答案: