div内にhtmlオブジェクト要素を入れる方法

htmlオブジェクトがredbox divの上に浮いています。どのように私はそれを赤いボックスdivの中に入れておくことができますか？ divsのようにいくつかのオプションを試しました。どういうわけかオブジェクトは、たとえばimgタグのようなダイブリンドで動作しています。私はなぜ、インターネットで検索し、解決策を見つけられなかったのか分からない。私は誰かが私を助け、私が間違っていることを私に説明することを願っています。div内にhtmlオブジェクト要素を入れる方法

.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

'ポジションを追加します： – Pete

を.redboxするrelative'私はわかりませんが、あなたがこのように期待します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

div内にhtmlオブジェクト要素を入れる方法

答えて

関連する問題