2016-03-01 111 views
0

我正在製作一個簡單的reactjs應用程序,我需要在圖像上放置button。 我的HTML看起來像:css在圖像上顯示按鈕

<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

我該如何做這項工作?

+3

使用CSS,相對或絕對位置,你想要的按鈕,它 –

+0

作爲@JaromandaX提到的,設置一個相對/絕對具有正確的z-index,應該做這個我試過'.mynew-BTN { 位置工作 –

回答

1

make button position relative並使用z-index:也許它會對你有所幫助。

+0

:絕對; z-index:10; margin-top:10px; – gamer

+0

'.mynew-btn {position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; z-index:10;}'試試這個。 https://jsfiddle.net/hamzanisar/33yt3b21/ –

0

使用z索引性質

CSS中的z索引屬性控制重疊 元素的垂直堆疊順序。就像在哪一個,看起來好像在物理上 更接近你。 z-index只對 值的元素具有非靜態值(默認值)。注意:z-index只能在 定位元素 (position:absolute,position:relative或position:fixed)上有效。

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

有沒有什麼辦法我可以風格的按鈕來實現這一目標? – gamer

+0

如果添加.button {position:absolute; z-index:10; }?它不起作用? – Greg

+0

它在圖像.. z索引有效後出現,但按鈕出現在圖像'後面。mynew-btn位置:絕對; z-index:10; margin-top:10px; }' – gamer

1

如果要居中的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%; 
} 

所以,裏面的渲染方法

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。而且不必太擔心造型。

希望有幫助!

+0

爲什麼你在CSS中使用'backgroud'? – gamer

+0

這只是爲了向你展示一個例子。你可以從CSS中刪除它。我從小提琴中解脫出來解釋。 –