試圖讓旗幟漂浮在盒子掛在

我試圖讓一個橫幅圖像坐了一個白色盒子，在它的文本。我希望橫幅圖像漂浮在每個邊緣並懸掛起來，而不是限制在box div的大小。試圖讓旗幟漂浮在盒子掛在

我試圖做的旗幟的形象和絕對定位它，但我以前不提供一個很好的結果。該頁面設計爲響應式，而其他元素相應縮小，圖像保持較大。

附件中是什麼，我想實現這樣的橫幅圖像。一切都是編碼的，這只是我不能正確的標語。

任何幫助，非常感謝！

謝謝尼克

來源

2015-11-24 Nick L

請包括你有那麼我們可以幫你的代碼。 –

謝謝。我不想粘貼整張代碼，我不能100％確定相關部分是什麼。我猜想我想弄清楚的是如何編碼白盒，使其相對於橫幅div，同時保持響應。 –

「如何編碼白盒，使其相對於橫幅div」......您不......您將橫幅相對於div放置，而不是相反。 –

您可以：

套用position:relative到banner和whitebox
移動banner向下（使用正px值）的頂部.. 。
（任選地）移動至向上whitebox的頂部（使用負px值）

見例如：

.whitebox, .banner { 
 
position: relative; 
 
margin: 0 auto; 
 
} 
 

 
.banner { 
 
width: 360px; 
 
height: 45px; 
 
border: 1px solid rgba(191,191,191,1); 
 
} 
 

 
.whitebox { 
 
width: 300px; 
 
height: 200px; 
 
border: 1px solid rgba(127,127,127,1); 
 
} 
 

 
.banner { 
 
top: 80px; 
 
}

<div class="banner"> 
 
</div> 
 

 
<div class="whitebox"> 
 
</div>

來源

2015-11-24 17:49:06 Rounin

非常感謝你Rounin爲你的代碼提供幫助。這個解決方案的問題似乎是，當框由於響應性而改變大小時，橫幅不再居中並且位於白框的位置。它可以在dekstop，寬屏模式下正常工作，但在屏幕尺寸縮小時無法正常工作。 –

您是否在使用'@media queries'來動態更新'.banner'和'.whitebox'的寬度？或者（或者），你是否使用百分比來聲明'.banner'和'.whitebox'的寬度？ – Rounin

試圖讓旗幟漂浮在盒子掛在

回答

相關問題