Positionnement div superposant une image

**thenaoh** · 31/01/2014, 14h10

Bonjour,

Je cherche depuis hier comment placer un div par-dessus une image, mais selon des critères bien particuliers :
- l'image fait la largeur de la page web (width: 100%), et elle n'est pas déformée (la hauteur reste proportionnelle à la largeur)
- le div que je souhaite placer est à 23% de la hauteur de l'image (top: 23%), et est aligné à gauche dans un div parent, superposé à l'image, centré, de largeur fixe (1000px).

Ici un visuel pour illustrer mon propos :

Comment, donc, placer mon div jaune ?

Merci par avance pour votre aide !

**Torgar** · 31/01/2014, 15h17

Salut,

Montre nous le code que tu as fait déjà, ça nous donnera une base de travail.

**thenaoh** · 31/01/2014, 15h28

Voici le code actuel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<body>
<div style="width: 100%; position: relative;">
	<img src="imagefond.jpg" style="width: 100%; position: relative; z-index: 0; display: block;" />
	<div style="width: auto; max-width: 1000px; margin: 0 auto; height: 100%; position: relative; background-color: #FF0000; z-index: 1;">
		<div style="position: absolute; top: 23%; left: 0; width: 600px; height: 200px; background-color: #FFFF00;">
			div jaune
		</div>
	</div>
</div>
</body>

Merci !

**JefReb** · 31/01/2014, 17h22

La boite jaune en relative fonctionne bien, mais il faut une hauteur pour la boite rouge.
Voici un essai: http://codepen.io/anon/pen/guJeA

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#fond        { width:900px; height:auto; background-color:green;; }
.rouge       { width:800px; height:500px; margin:0 auto; background-color:red; }
.jaune       { width:600px; height:200px; background-color:yellow; position: relative; top:23%; left:0; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="fond">
	<div class="rouge">
		<div class="jaune">
			div jaune
		</div>
	</div>
</div>

**thenaoh** · 31/01/2014, 17h34

Merci, mais ça ne répond pas à mon problème...

Le fond comporte une image, dont la largeur est celle de la page (pas de background-image, donc), et le div rouge doit avoir la même hauteur que l'image, afin que le div jaune se positionne à 23% de la hauteur de l'image ...

Une idée ?

**Candygirl** · 31/01/2014, 18h04

Hello,

C'est quelque chose comme ça que tu veux obtenir ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div style="position: relative;">
	<img src="imagefond.jpg" style="width: 100%; display: block;" />
	<div style="max-width: 1000px; margin:auto; left:0; right:0; top:0; height: 100%; position: absolute; background-color: #FF0000;">
		<div style="position: relative; top: 23%; width: 600px; height: 200px; background-color: #FFFF00;">
			div jaune
		</div>
	</div>
</div>

Positionnement div superposant une image

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager