我有兩個包含影像的網格列，我想強制它們彼此重疊，就像這里的設計中所示：
但是，Ionic 和 Bootstrap（Ionic 使用的）似乎都沒有提供這樣的選項。
我目前擁有的是以下代碼：
<ion-row>
<ion-col>
<img src="assets/images/planet-ring.svg">
</ion-col>
<ion-col>
<img src="assets/images/wear-image.png">
</ion-col>
</ion-row>
這將列并排放置：
我也嘗試過使用下面的代碼玩絕對位置，但它使 ionic 丟失了一些默認列樣式并迫使影像離開列：
.app-overlap-column {
position: absolute;
left: 0;
right: 0;
}
關于如何實作這一目標的任何想法？
uj5u.com熱心網友回復：
它們必須在單獨的列中嗎？為什么不把它們一個包裹在另一個里面呢？或者，也許可以嘗試將您想要的影像設定為background-image另一個包裝器的影像，如下所示：
<ion-row class="wrapper">
<img src="assets/images/planet-ring.svg">
</ion-row>
.wrapper {
background-image: url("assets/images/wear-image.png");
// insert width, height, padding...
}
uj5u.com熱心網友回復：
找到了一個簡單的解決方案！
只需offset="-12"像這樣在第二列上使用：
<ion-row>
<ion-col>
<img src="assets/images/planet-ring.svg">
</ion-col>
<ion-col offset="-12">
<img src="assets/images/wear-image.png">
</ion-col>
</ion-row>
PS 這行得通，因為網格分為 12 個“列”，當我們提供偏移量為 -12 時，我們基本上將列移動到前面，在另一列之上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/482954.html
上一篇：WSL2Nginx PHPFPM在連接到上游時失敗（111：連接被拒絕），客戶端：172.23.0.1，上游：“fastcgi://172.23.0.3:9001”