【问题标题】：How to position a SVG arrow next to a button [closed]如何在按钮旁边放置 SVG 箭头 [关闭]
【发布时间】：2019-03-06 00:16:44
【问题描述】：

基本上，我想完成这个：example

我发现我可以将z-index 设置为1000 并使用position: absolute，但是我无法弄清楚设置top 和left 属性的内容，因为按钮的位置根据内容而变化。

【问题讨论】：

如果你能包含你的代码会更好
包含一个庞大的 PHP 文件没有任何帮助。箭头是 SVG，其他都是带有 Bootstrap 3 标记的常规 HTML。本质上的问题是，如何在页面上的给定元素旁边定位绝对 <div>。
我的意思是，您希望任何人猜测您的 html 的结构然后帮助您解决问题，您说的是 SVG img，是的，那么我们所看到的 SVG img 是什么你是在说问题但没问题，我不是说包含所有内容，只是一个显示问题的sn-p
人们正在努力帮助您。不要粗鲁。您可以创建一个最小可重现的示例代码。

标签： javascript css svg

【解决方案1】：

尝试将 SVG 箭头放置为 ::after 的 <button>。相对定位<button>，绝对定位::after。

button {
  position: relative;
}

button::after {
  position: absolute;
}

这样您就可以使用标准的left 和top 属性使::after 始终与<button> 相关

【讨论】：

很酷的想法，但是当 SVG 图像超出按钮元素的边界框时，它会像这颗星 here 一样被剪掉。 z-index 似乎没有做任何事情，overflow: visible 也没有
aaaaa 这就是为什么您应该分享的不仅仅是一个问题——代码片段或背景信息。您在评论中提到了引导程序。我的解决方案当然会奏效。但不适用于您的习惯和特定情况。
您的解决方案奏效了！我必须创建一个容器元素并解决了这个问题。

【解决方案2】：

如何在页面上的给定元素旁边定位绝对 <div>

两者之间最好有父子关系

演示

说:before是svg img

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  margin: 10px 0 0 10px;
  background: transparent;
  border: 2px solid orange;
  padding: 10px 20px;
  position: relative;
}

button>div {
  position: absolute;
  background: orange;
  width: 30%;
  height: 2px;
  left: 105%;
  top: 50%;
}


/* Irelevent : just for demonstration */
button>div:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid orange;
  border-bottom: none;
  border-right: none;
  transform: rotate(-45deg);
  top: -9px;
  right: calc(100% - 22px);
}
button>div:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid orange;
    border-radius: 0 0 5px 0;
    bottom: calc(100% - 2px);
    left: 50% ;
    border-top:none;
    border-top-color: transparent;
    border-left-color: transparent;
}

&lt;button&gt;Click Me &lt;div&gt;&lt;/div&gt;&lt;/button&gt;

当一个元素相对定位时，它都是绝对/相对定位子元素是相对于它的，所以当你对子元素说left:100% 时，它会将子元素推到父元素宽度的 100%，这使得相对于另一个元素定位元素变得容易。如果您不知道我的意思，请从这里禁用所有继承的样式，请尝试单击按钮。

【讨论】：