如何將html對象元素放在div內

html對象在redbox div上方浮動。我怎樣才能保持它在紅盒子裏面。我嘗試了幾個選項，如反轉divs。不知何故，對象是行動diverend然後例如img標籤。我不知道爲什麼，在互聯網上搜索並沒有找到解決方案。我希望有人能幫我解釋我做錯了什麼。如何將html對象元素放在div內

.redbox{ 
 
     background-color: red; 
 
     border: 1px solid #ddd; 
 
     border-radius: 4px; 
 
     display: block; 
 
     line-height: 1.42857; 
 
     margin-bottom: 20px; 
 
     padding: 4px; 
 
     transition: border 0.2s ease-in-out 0s; 
 
     width:25%; 
 
     height: 200px; 
 
     
 
} 
 
.redbox object { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:25%; 
 
} 
 
.redbox .caption { 
 
    color: #333; 
 
    padding: 9px; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    
 
    <div class="redbox"> 
 
    <object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object> 
 
    <div class ="caption"> 
 
    here is some text 
 
    </div> 
 
    </div> 
 
    
 
    </body>

來源

2017-10-10 GJF

加上'位置：relative'到.redbox – Pete

我不知道，但你希望這樣https://jsfiddle.net/oLxjkqu2/1/ – vinothini

謝謝，就是這麼簡單！我潛入更深的位置 – GJF

-2

我認爲你可以使用Z-Index屬性。

我在這裏提供修改後的代碼，請檢查一次。

.redbox{ 
 
     background-color: red; 
 
     border: 1px solid #ddd; 
 
     border-radius: 4px; 
 
     display: block; 
 
     line-height: 1.42857; 
 
     margin-bottom: 20px; 
 
     padding: 4px; 
 
     transition: border 0.2s ease-in-out 0s; 
 
     width:25%; 
 
     height: 200px; 
 
     z-index : 1; 
 
} 
 
.redbox object { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:25%; 
 
    z-index:-1; 
 
} 
 
.redbox .caption { 
 
    color: #333; 
 
    padding: 9px; 
 
}

<html> 
 
     <head> 
 
     </head> 
 
     <body> 
 
     
 
\t \t <div class="redbox"> 
 
\t \t <object data="https://mozilla.github.io/pdf.js/web/viewer.html" type="application/pdf"></object> 
 
\t \t <div class ="caption"> 
 
\t \t here is some text 
 
\t \t </div> 
 
\t \t </div> 
 
     
 
     </body> 
 
\t </html>

來源

2017-10-10 08:02:14

謝謝，但我的意思是是紅色div內和標題上方的對象 – GJF

如何將html對象元素放在div內

回答

相關問題