演示

Question

基本上，我想完成此操作：example

我已经知道可以将z-index设置为1000并使用position: absolute，但是我不知道如何设置top和{{ 1}}属性，因为按钮的位置根据内容而变化。

Answer 1

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

::after

通过这种方式，您将能够使用标准的button { position: relative; } button::after { position: absolute; }和::after属性使<button>始终相对于left

Answer 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;
}

<button>Click Me <div></div></button>

当元素相对放置时，所有元素的绝对/相对位置子元素是相对于它的，因此，当您在子元素上说left:100%时，它将把子元素推到父元素宽度的100％，这使元素相对于另一个元素的放置变得容易。从这里开始，如果您不知道我的意思，则只需禁用所有继承的样式即可。

如何将SVG箭头放置在按钮旁边

2 个答案:

演示