CSS定位幫助 - 圖像重疊DIVS在任何一方

Question

我真的堅持這一點，並會欣賞任何方向。

我需要使用CMS和html編碼以下設計，但我不知道如何讓中心圖像重疊在圖像的右側和左側的div。我一直在閱讀關於相對位置和z-索引，但是我嘗試過的所有東西都失敗了。通常，當我排隊三次潛水時，我將使用float屬性，並且它完美地工作，但事實證明，z-indexes只能與定位元素一起使用。如果有人能讓我開始正確的方向，我可能會弄清楚。

看，我想在這裏代碼的設計：https://cdn.shopify.com/s/files/1/0211/8026/files/Example.png?9982

這是基本的框架，但我不知道從哪裏何去何從......

.row-container { 
 
    width: 100%; 
 
    height: 300px; 
 
    margin: auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.box1 { 
 
    height: 216px; 
 
    width: 288px; 
 
    float: left ; /* <-- This does not work */ 
 
    border: 1px solid blue; 
 
} 
 
.image { 
 
    height: 250px; 
 
    width: 350px; 
 
    float: left ; /* <-- This does not work */ 
 
    border: 1px solid grey; 
 
} 
 
.box2 { 
 
    height: 216px; 
 
    width: 288px; 
 
    float: left; /* <-- This does not work */ 
 
    border: 1px solid red; 
 
}

<div class="row-container"> 
 
    <div class="box1"></div> 
 
    <div class="image">-- Should I use a div for the image?</div> 
 
    <div class="box2"></div> 
 
</div>

Answer 1

您可以在position: relative上使用z-index，因此請將其添加到您的內部元素並設置z-index。

要創建重疊，您可以在第二個和第三個元素上使用負數margin-left。

Answer 2

試試這個它會工作更加好一點，如果使用position:absolute但既然你想漂浮會有重新上漿問題Fiddle

縮小，以獲得效果

.row-container { 
 
    width: 100%; 
 
    height: 300px; 
 
    margin: auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.box1 { 
 
    position: relative; 
 
    z-index: -1; 
 
    background: green; 
 
    height: 216px; 
 
    width: 288px; 
 
    float: left; 
 
} 
 
.image { 
 
    margin-left: -80px; 
 
    background: red; 
 
    float: left; 
 
    height: 250px; 
 
    width: 200px; 
 
} 
 
.image img { 
 
    width: 300px; 
 
} 
 
.box2 { 
 
    position: relative; 
 
    z-index: -1; 
 
    float: left; 
 
    background: blue; 
 
    height: 216px; 
 
    width: 288px; 
 
}

<div class="row-container"> 
 
    <div class="box1"></div> 
 
    <div class="image"> 
 
    <img src="http://placekitten.com/300/301" /> 
 
    </div> 
 
    <div class="box2"></div> 
 
</div>

Answer 3

您可以使用position：（爲了強調而添加顏色）

fiddle

.row-container { 
    width:900px; 
    height:300px; 
    margin:auto; 
    text-align: center; 
    border:2px solid black; 
    background-color:blue; 
    position:relative; 
    } 

    .box1 { 
    height:216px; 
    width: 288px; 
    left:0px; 
    position:absolute; 
    z-index:10; 
    } 

    .image { 
    height:250px; 
    width: 350px; 
    position:absolute; 
    top:20px; 
    left:275px; 
    z-index:100; 
    background-color:red; 
    } 

    .box2 { 
    height:216px; 
    width: 288px; 
    right:0px; 
    position:absolute; 
    z-index:10; 
    } 

    div{ 
    background-color:green; 
    }