各位大大您好，center-block img-responsive這個class可以水平置中又置頂，那請問如何讓下列兩圖片在不破壞center-block img-responsive這個class特性的情況下，讓兩圖片重疊，謝謝各位大大!
<img alt="海洋展覽館" id="imgT1" class="center-block img-responsive" src="MasterImages/1170px-b.jpg">
<img alt="海洋展覽館" id="imgT2" class="center-block img-responsive" src="MasterImages/1170px-bText.png" />
已邀請的邦友 {{ invite_list.length }}/5
可能要請eden1762
去找這個CSS檔
然後在這個CSS檔分別搜尋center-block與img-responsive
這需要看這兩個CSS設定了那些屬性
如此才能避免發生衝突
就我所知~
想要水平可以利用float:left 或 float:right 或 display:inline-block...
想要置中可以利用display:block 以及 margin-left:auto、margin-right:auto
想要置頂可以利用position:fixed 以及 margin-top:0px
想要重疊得要有圖層概念..可以利用position:absolute 以及 z-index:???
特別說明..z-index就是所謂第三軸
以你的問題來看..
一張圖片設定 1 ..一張圖片設定 2 ..就可以讓圖片重疊~
當然..要實現z-index一定要搭配position:absolute(設定絕對位置)
img-responsive 與 center-block 內容如下，我有設定position等於absolute與z-index、left，不過position設定之後img下面的div也會浮上來置頂，無法保持在img下面，left設定之後放大縮小會無法置中。再設定width，可以置中，但是無法放大或縮小。請問各位大大如何解決，謝謝！程式碼如下：
<style>
#imgT1{
/*調整*/
position:absolute;
z-index:0;
left:10%;
width:80%;
/*img-responsive*/
display: block;
max-width: 100%;
height: auto;
/*center-block*/
display: block;
margin-right: auto;
margin-left: auto;
}
#imgT2{
/*調整*/
position:absolute;
z-index:1;
left:40%;
width:20%;
/*img-responsive*/
display: block;
max-width: 100%;
height: auto;
/*center-block*/
display: block;
margin-right: auto;
margin-left: auto;
}
</style>
抱歉...我的錯~= =
忘了absolute使用後margin在本身的標籤上會有跟沒有一樣
如此就不會置中了~~
建議..將兩個img分別用兩個div包起來
例如:
<div> <img alt="" id="imgT1" class="" src="..."> </div>
<div> <img alt="" id="imgT2" class="" src="..."> </div>
然後把你調整來重疊的屬性
另外丟出來給div用
也就是說真正做重疊這件事的是div
而img自己則處理置中與水平排放
順道一提..
置頂的部分..本身與position有關聯
所以相關位置屬性~就必須由div處理~
對了~!!!!
我自己測試你的程式時...
我並沒有用到left這個屬性..
理論上...你要置中的話...
就不會用到left這個屬性~
所以...我不懂為何你要使用他...0..0
突然想到...
使用了position:absolute;後..
因為margin失效了..
因此...如果想要移動元件位置..
確實是需要left 或 right 屬性(當然還有top 以及 bottom 屬性)
不過這四個屬性在調整位置上..
就不像margin一樣那麼方便調整了~
自己實驗玩玩看就可以感覺到了~
你好，你可以試著用這個方式
底下那張圖(姑且稱為第一張圖)相對位置( position:relative)至你的body或著div(即應放置容器)上面那張圖絕對位置(position:absolute)你的第一張圖。
第二張圖的設定透過直接指定的方式(left right top bottom )重疊在第一張圖上面，第一張圖可以直接透過你原本使用的置中語法去調整。
這樣就可以達到效果
<body>
<div class="position:relative" >
<img>
<div class="position:absolute">
<img>
</div>
</div>
</body>
iThome鐵人賽
看影片追技術