18105 sujets

Questions générales et questions de débutants

[CSS] La div ne reste en premier plan que si le fond est coloré...

Bonjour,

j'ai cherché sur Google sans trouver de réponse à ma question alors je m'en réfère à vous...

pour "encadrer" (juste le coin supérieur gauche) les vidéos que j'ai placée sur le site web que je suis en train de construire, j'ai créé un calque (div) venant se placer par-dessus la vidéo.

Tout va bien tant que le calque contenant la décoration (en bg) a un fond coloré. Dès que je l'enlève, la div s'affiche SOUS la vidéo! Bizarre non?! Voici mon code

HTML 
<div>
	<div class="cadre_content">&nbsp;</div>
	<object type="application/x-shockwave-flash" width="560" height="315" data="url">
		<param name="movie" value="url" />
	</object>
</div>


CSS
.cadre_content{
	width:355px;
	height:166px;
	background-image:url('../design/cadre_content.png');
	background-repeat:no-repeat;
	background-position:top left;
	position:absolute;
	background-color:transparent;
	margin-left:15px;
}


J'attends vos réponses...
Modérateur
a écrit :
<div class="cadre_content">&nbsp;</div>

<object type="application/x-shockwave-flash" width="560" height="315" data="url">

<param name="movie" value="url" />

</object>

Mais la, <div class="cadre_content">&nbsp;</div> est en dessous de la video...
Quand tu ecris
<div id="a"></div>
<div id="b"></div>

la 'b' est au dessus de la 'a'

Pas sur d'avoir compris ta question...

Et bizarre que le bg-color influe sur le z-index...
Même si je définis manuellement le z-index (à 999 par exemple) pour que la div se positionne au-dessus de toutes les autres, ça ne change rien.

Et je confirme, en rajoutant "background-color: yellow;", la div se place au-dessus de la vidéo, et lorsque je l'enlève, elle se place en-dessous.

Est-il possible que ce soit à cause du fait que ce soit un objet vidéo et qu'il à tendance s'afficher en premier-plan, je sais pas...?! Je sais que ça a l'air bizarre mais testez vous-même vous verrez... (pour info l'url pointe vers une vidéo Youtube)

Personne n'a rencontré de problème similaire?! Smiley decu

J'utilise Firefox 8.0.1 .
Modérateur
et quand tu mets :

<div>

	<object type="application/x-shockwave-flash" width="560" height="315" data="url">

		<param name="movie" value="url" />

	</object>

	<div class="cadre_content">&nbsp;</div>

</div>


ca change rien ?
Non, mise à part qu'il se place après la vidéo (mais toujours sous la suivante)

edit : ou plus simple : quelle est la méthode appropriée pour faire "chevaucher" une image par-dessus une vidéo car je n'utilise visiblement pas la bonne Smiley confused ? Mais bon ce genre de recherche je peux le faire de mon côté (veux pas vous embêter plus longtemps), mais si quelqu'un a une solution quelconque je suis toujours preneuse!
Modifié par Arrowinthekee (19 Dec 2011 - 12:11)
Sujet clos
Aller à