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

Creating a InfoBox window above a marker with the stub in the correct place

本文关键字：存根 位置 窗口 一个 方创建 创建 InfoBox      更新时间：2023-09-26

我一直在使用InfoBox文档和本文，试图让InfoBox看起来与标准InfoWindow几乎相同，以此作为一些细微的外观更改的起点。

正如您在这个小提琴中看到的，将InfoBox连接到标记的"存根"仍然位于InfoBox的顶部。

我曾尝试在boxStyle参数中使用backgroundPosition（第一次打开fiddle时已注释掉），如下所示，但它不起作用。

     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"
    },

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

将其与: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;
}

参见演示

附言：我没有从你的JS中删除旧的。这就是为什么你会在屏幕上看到它。

按照OP要求的支持文件

有大量关于CSS选择器的文档，特别是:before和:after选择器。其中一些，可能还有最基本的信息，可以在w3schools中找到。

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

通过用选择器破解元素，您还可以根据行为进行样式设置。如:hover、:focus、:active、:inactive、:empty和:blank

实际的三角形是通过使用边框绘制一个小矩形并剪裁边框的一侧来构建的。请参阅有关如何构建CSS三角形的CSS技巧中的此链接。

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

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

.infoBox {
    background-position: center bottom;
}
#infobox {
    margin-bottom: 8px;
}

请参阅更新的fiddle

相关文章：