Commenti a: CSS tip #2 – Posizione, Z-Index e PNG http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/ Articoli e Tutorial sul web e dintorni - a cura di Salvatore Laisa Fri, 10 Sep 2010 09:06:15 +0000 hourly 1 http://wordpress.org/?v=3.0.1 Di: CSS Tip #9 – Css di Natale! | MoebiusMania http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/comment-page-1/#comment-3893 CSS Tip #9 – Css di Natale! | MoebiusMania Thu, 17 Jun 2010 19:25:27 +0000 http://www.moebiusmania.net/?p=186#comment-3893 [...] Qui riporto solo un’elemento come esempio ma la cosa si ripete per tutti gli elementi. Partiamo dal selettore: scrivendo il nome del div seguito senza spazio dalla classe creò una selezione che dice al browser “prendi tutti gli elementi con id albero che hanno come proprietà class cpack”, questo selettore ha il vantaggio di essere molto preciso. Per le proprietà le uniche note “particolari” sono che sfrutto dei margini negativi per far rientrare leggermente le immagini in modo da farle sembrare nascoste fuori dallo schermo, e infine z-index per decidere (in caso di sovrapposizione) quale elemento deve stare sopra, se non vi ricordate come funziona potete rivedere il Css Tip #2. [...] [...] Qui riporto solo un’elemento come esempio ma la cosa si ripete per tutti gli elementi. Partiamo dal selettore: scrivendo il nome del div seguito senza spazio dalla classe creò una selezione che dice al browser “prendi tutti gli elementi con id albero che hanno come proprietà class cpack”, questo selettore ha il vantaggio di essere molto preciso. Per le proprietà le uniche note “particolari” sono che sfrutto dei margini negativi per far rientrare leggermente le immagini in modo da farle sembrare nascoste fuori dallo schermo, e infine z-index per decidere (in caso di sovrapposizione) quale elemento deve stare sopra, se non vi ricordate come funziona potete rivedere il Css Tip #2. [...]

]]> Di: CSS Tip #11 – Le immagini di sfondo | MoebiusMania http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/comment-page-1/#comment-3622 CSS Tip #11 – Le immagini di sfondo | MoebiusMania Wed, 24 Mar 2010 19:17:50 +0000 http://www.moebiusmania.net/?p=186#comment-3622 [...] il percorso dell’immagine da inserire. Sono accettati i principali formati di file grafici (jpg, gif, png) mentre a differenza del tag <img> in Html se l’immagine non dovesse essere caricata, o [...] [...] il percorso dell’immagine da inserire. Sono accettati i principali formati di file grafici (jpg, gif, png) mentre a differenza del tag <img> in Html se l’immagine non dovesse essere caricata, o [...]

]]> Di: Salvo http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/comment-page-1/#comment-2830 Salvo Wed, 13 Jan 2010 23:48:41 +0000 http://www.moebiusmania.net/?p=186#comment-2830 grazie per l'apprezzamento! allora, certo che si può usare z-index con gli AP (absolute positioning), è usare gli AP per gli sfondi che è tecnicamente sbagliato, diciamo che in generale per lavorare con immagini di sfondo è meglio sfruttare le proprietà di "background-position" magari associate a un "background-image". La proprieta "position: absolute" ha proprio lo scopo di mettere gli oggetti in primo piano rispetto al resto della pagina , tuttavia se metti un valore negativo per z-index (tipo -1) sposti gli oggetti "dietro" al body permettendo di sfruttare impropriamente gli AP anche per immagini di sfondo. ATTENZIONE: se il body o altri oggetti al suo interno hanno colori/immagini di sfondo copriranno l'oggetto con lo z-index negativo grazie per l’apprezzamento!
allora, certo che si può usare z-index con gli AP (absolute positioning), è usare gli AP per gli sfondi che è tecnicamente sbagliato, diciamo che in generale per lavorare con immagini di sfondo è meglio sfruttare le proprietà di “background-position” magari associate a un “background-image”.
La proprieta “position: absolute” ha proprio lo scopo di mettere gli oggetti in primo piano rispetto al resto della pagina , tuttavia se metti un valore negativo per z-index (tipo -1) sposti gli oggetti “dietro” al body permettendo di sfruttare impropriamente gli AP anche per immagini di sfondo.
ATTENZIONE: se il body o altri oggetti al suo interno hanno colori/immagini di sfondo copriranno l’oggetto con lo z-index negativo

]]> Di: Andrea Giavara http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/comment-page-1/#comment-2829 Andrea Giavara Wed, 13 Jan 2010 23:17:13 +0000 http://www.moebiusmania.net/?p=186#comment-2829 Bravo bell'articolo! Si può utilizzare il z-index anche se posizione l'oggetto con absolute? Mi spiego meglio: vorrei mettere un'immagine sullo sfondo posizionata con position: absolute, ho provato con z index ma resta sempre sopra degli altri oggetti. Grazie ciao! Andrea Bravo bell’articolo!
Si può utilizzare il z-index anche se posizione l’oggetto con absolute?

Mi spiego meglio:
vorrei mettere un’immagine sullo sfondo posizionata con position: absolute, ho provato con z index ma resta sempre sopra degli altri oggetti.

Grazie ciao!
Andrea

]]> Di: CSS tip #6 - Assoluto nel relativo | MoebiusMania http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/comment-page-1/#comment-41 CSS tip #6 - Assoluto nel relativo | MoebiusMania Tue, 31 Mar 2009 17:31:25 +0000 http://www.moebiusmania.net/?p=186#comment-41 [...] In precedenza avevo accennato al discorso di come posizionare oggetti in modo fisso alla pagina, l’unico problema di quella nozione era che non vi permetteva di posizionare gli oggetti all’interno di blocchi <div>, questo perche il posizionamento assoluto nei Css al momento della visualizzazione “rimuove” l’oggetto con la suddetta proprietà dalla struttura Html (ripeto è una rimozione che avviene solo a livello visivo, il vostro codice rimane inalterato!) e lo posizione liberamente alle coordinate specificate della pagina. [...] [...] In precedenza avevo accennato al discorso di come posizionare oggetti in modo fisso alla pagina, l’unico problema di quella nozione era che non vi permetteva di posizionare gli oggetti all’interno di blocchi <div>, questo perche il posizionamento assoluto nei Css al momento della visualizzazione “rimuove” l’oggetto con la suddetta proprietà dalla struttura Html (ripeto è una rimozione che avviene solo a livello visivo, il vostro codice rimane inalterato!) e lo posizione liberamente alle coordinate specificate della pagina. [...]

]]> Di: CSS tip #2 - Posizione, Z-Index e PNG | MoebiusMania http://www.moebiusmania.net/2008/12/22/css-tip-2-posizione-z-index-e-png/comment-page-1/#comment-6 CSS tip #2 - Posizione, Z-Index e PNG | MoebiusMania Tue, 23 Dec 2008 01:06:56 +0000 http://www.moebiusmania.net/?p=186#comment-6 [...] approfondire consulta la fonte: CSS tip #2 - Posizione, Z-Index e PNG | MoebiusMania Author: [...] [...] approfondire consulta la fonte: CSS tip #2 – Posizione, Z-Index e PNG | MoebiusMania Author: [...]

]]>