comment placer l'élément d'objet html à l'intérieur div

l'objet HTML flotte au-dessus de la redbox div. Comment puis-je le garder à l'intérieur de la redbox div. J'ai essayé plusieurs options comme inverser les divs. D'une manière ou d'une autre, l'objet agit en divergence, par exemple en img tags. Je ne sais pas pourquoi, Rechercher sur internet et n'a pas trouvé de solution. J'espère que quelqu'un peut m'aider et m'expliquer ce que je fais mal.comment placer l'élément d'objet html à l'intérieur 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>

Source

2017-10-10 GJF

ajouter 'la position: relative' à .redbox – Pete

Je ne suis pas sûr, mais ne vous attendez comme ce https://jsfiddle.net/oLxjkqu2/1/ – vinothini

Merci, est-ce aussi simple que cela !. Je plonge plus profondément dans la position – GJF

-2

Je pense que vous pouvez utiliser la propriété Z-Index.

Ici, je fournis le code modifié s'il vous plaît vérifier une fois.

.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>

Source

2017-10-10 08:02:14

Merci, mais ce que je veux dire était l'objet à l'intérieur de la div rouge et au-dessus de la légende – GJF

comment placer l'élément d'objet html à l'intérieur div

Répondre

Questions connexes