Question

我正在创建一个简单的reactjs应用，我需要将button放在图像上。我的HTML看起来像：

<div className={"panel-body"}>
    <img className={"img-responsive center-block"}
         src={album.photos.data[0].source} />
    {(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>

图像下方显示除了按钮以外的所有细节。但我想在图像上或div

的中间显示按钮

我该如何做到这一点？

Answer 1

按下按钮position relative并使用z-index:，这可能会对您有所帮助。

Answer 2

如果你想将按钮置于div的中心，而div有一个背景图像。我建议，为div分配背景图像，而不是将图像插入div。看看小提琴：

http://jsfiddle.net/49s505sa/1/

HTML：

<div id="wrapper">
 <button type="button">Your Button</button>
</div>

CSS：

#wrapper {
 width: 100%;
 height: 400px;
 border: 1px solid black;
 background: url('http://placehold.it/350x150') /*assign image, for demo purposes */
}

button {
 height: 20px;
 position: relative;
 margin: -20px -50px;
 width: 100px;
 top: 50%;
 left: 50%;
}

所以，在render方法中

var style = {
  backgroundImage: 'url(' + album.photos.data[0].source+ ')'
}
<div className={"panel-body"} style={style}>
    {(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>

通过这种方式，我们将动态地将图像分配给特定的div。并且不必过于担心造型。

希望有所帮助！

Answer 3

使用 z-index 属性

CSS中的z-index属性控制垂直堆叠顺序重叠的元素。就像在，哪一个看起来好像是在物理上离你更近。 z-index仅影响具有位置的元素 static以外的值（默认值）.. 注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

img {
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}

css显示图像上的按钮

3 个答案: