Immagine e testo sopra un altra immagine solo con z-index?

[Alejandro]

Salve a tutti,
ho un problema con un blocco highlights.

Dovrei posizionare sopra ad un immaggine di sfondo due piccole immagini nei lati in alto e poi del testo in basso.

Il problema è che per fare questo forse dovrei usare il tag z-index ma mi risulta che questo comando è relazionato alla posizione. Ossia se non uso il comando position non funziona. Ora, se uso il comando position però, la posizione che vado a mettere mi viene relativa al browser!
Quindi quando ad esempio faccio il resize del browser mi sballa tutto.

sbaglio qualcosa io? Non c'è un modo di relazione il position al div all'interno del quale si trova invece che al browser o body?

Oppure esiste un metodo alternativo per mettere un immagine sopra un altra?

[jetpower]

Ciao, hai già provato con il posizionamento assoluto ?

[Alejandro]

Si come dicevo il posizionamento absolute è relativo al browser e non al div purtroppo. Questo è il mio problema.

Sbaglio io o è proprio così?

[jetpower]

Puoi annidare il tutto in un div contenitore e risolvere il problema

[Alejandro]

E' già così ma purtroppo ripeto il position absolute risulta sempre relativo al browser non al div principale.

Ecco il css:

.highlights {
	background: url(../img/highlights.png) no-repeat bottom;
	width: 350px;
	height:262px;
	background-color:black;
        overflow: hidden;
	padding:5px;
	margin-bottom:10px;
}

.highlights .image {
	width: 350px;
        height: 262px;
	margin:0 auto;
}

.highlights .hl_left_arrow {
	width: 24px;
	height: 24px;
	cursor: pointer;
	z-index: 99;
    background: url(../img/hl_left_arrow.png) no-repeat top left;
}

Fai il conto che la left arrow sia l'immagine da mettere sopra l'altra img ed il highlights iniziale il container.

HTML:

<div class="highlights" id="hl_div">
			<div>
				<div class="hl_left_arrow" onClick="showPrevHighlight();"></div>
				<div class="image" id="hl_image">[img]#[/img]</div>
			</div>
		</div>

[jetpower]

Non l'ho testato a fondo, ma solo su FF2 e IE7. Così è rimosso dal flusso e fa quello che vuoi tu. Poi magari non ho capito bene cosa intendevi... Hai una mail ?

[Alejandro]

Posta pure qui il codice così può essere d'aiuto ad altri.

[jetpower]

	<div class="container">
		<div class="highlights" id="hl_div">
			<div>
				<div class="hl_left_arrow" onClick="showPrevHighlight();"></div>
				<div class="image" id="hl_image">
					
				</div>
			</div>
		</div>
	</div>

body{
	background:#ccc;
}

.container{
	width:400px;
	border:2px solid #000;
	float:right;
}

.highlights {
	background: url(highlights.png) no-repeat bottom;
	width: 350px;
	height:262px;
	background-color:black;
    overflow: hidden;
	padding:5px;
	margin-bottom:10px;
	
}

.highlights .image {
	width: 350px;
    height: 262px;
	margin:0 auto;
}

.highlights .hl_left_arrow {
	width: 100px;
	height: 100px;
	cursor: pointer;
	position:relative;
	top:210px;
	left:300px;
	z-index: 1;
    background: url(hl_left_arrow.png) no-repeat top left;
}

[Alejandro]

Aspetta non capisco il perchè del container esterno agli highlights. Il container della pagina c'è già. A me serve che la left_arrow sia posizionata in modo assoluto in base al div highlights non al di fuori di esso.

E poi cosa centra il float?

[jetpower]

Il float l'ho messo per farti vedere che lo potevi posizionare dove volevi dal momento che il div highlights non aveva un suo posizionamento.

Per quanto riguarda hl_left_arrow è all'interno del div highlights e non all'esterno, e si posiziona di conseguenza: infatti se tu togli highlights dal container e setti per highlights un float, un margin-left o quant'altro vedrai che hl_left_arrow è posizionata in modo relativo in base alla posizione del div highlights.