Question

我希望能够有一个相对于图像定位的按钮。我为我想做的事做了一个 jsfiddle 。

我的期望是按钮会随图像一起移动，但正如你所看到的那样，它不会=（

HTML：

<div id="container">

<div id="parent">
    <img src="http://i.imgur.com/wsNrRVQ.jpg" width=200px height=200px>
</div>

<div id="child">
    <button>
    Click Me
    </button>
</div>

CSS：

#container {
  position: relative;
}

#parent {
  position: absolute;
  left: 200px;
}

#child {
  position: absolute;
}

Answer 1

试试这个 -

<div id="container">

 <div id="parent">
    <img src="http://i.imgur.com/wsNrRVQ.jpg" width=200px height=200px>
    <div id="child">
      <button>
      Click Me
      </button>
    </div>
 </div> 
</div>

Answer 2

当您说按钮应位于图像relative时，您必须将按钮放在保存图像的div内，并为按钮指定相对位置。

更新小提琴： https://jsfiddle.net/a1e1vb1n/2/

Answer 3

相关变化如下：

#parent {
  position: absolute;
  left: 200px;
  display: flex;
}

#img {
  display: block;
}

#button {
  display: block;
  height: 20px;
  width: 50px;
}

将按钮移至#parent并为其提供了#button的ID，尺寸为50 x 20px，以确保简单稳定。
制作#img和#button display: block以确保稳定性。
删除#child，因为不再需要它。
制作#parent个灵活容器，以控制其子项#img和#button
如果您希望#button高于或低于#img：
- 高于#img：将flex-direction: column添加到#parent
- #img下方：flex-direction: column-reverse添加#parent

Fiddle

<强>段

＆＃13;

#container {
  position: relative;
}

#parent {
  position: absolute;
  left: 200px;
  display: flex;
}

#img {
  display: block;
}

#button {
  display: block;
  height: 20px;
  width: 70px;
}

＆＃13;

<div id="container">

  <div id="parent">
    <button id="button">
      Click Me
    </button>
    <img id="img" src="http://i.imgur.com/wsNrRVQ.jpg" width=200px height=200px>
  </div>



</div>

＆＃13;

请参阅此article for flexbox

相对于图像的位置按钮

3 个答案: