z-index e overflow?

[Duma]

In un sito che sto realizzando ho un piccolo problema con l'attributo overflow.
Nella pagina su cui sto lavorando ho un div con l'attriburo overflow settato a "scroll" e all'interno ho delle immagini che hanno position:absolute e degli z-index superiori a quello del div.

In questa pagina devo poter ingrandire a mio piacimento le immagini e lo faccio tramite javascript, solo che ad un certo punto le immagini (giustamente) sforano dal div e si sovrappongono ad altre parti della pagina, mentre io vorrei che il div si allargasse internamente attivandomi le due barre laterali e che le immagini non sforassero.

E' fattibile?

[pictor]

Personalmente credo di no.

O forse sì e il problema potrebbe stare negli eventi Javascript: magari devi 'aggiornare' la qualche elemento della pagina in modo che si adatti alle nuove dimensioni. Ma sono idee.. non è detto che sia così.

Soprattutto non so se cambiando da absolute a relative possa aiutare. Absolute teoricamente non è rimosso dal flusso?

Teoricamente non influenza le dimensioni del suo container.... ma leggiti le specifiche per sicurezza.

[Mich_]

Originariamente inviato da Duma
In un sito che sto realizzando ho un piccolo problema con l'attributo overflow.
Nella pagina su cui sto lavorando ho un div con l'attriburo overflow settato a "scroll" e all'interno ho delle immagini che hanno position:absolute e degli z-index superiori a quello del div.

In questa pagina devo poter ingrandire a mio piacimento le immagini e lo faccio tramite javascript, solo che ad un certo punto le immagini (giustamente) sforano dal div e si sovrappongono ad altre parti della pagina, mentre io vorrei che il div si allargasse internamente attivandomi le due barre laterali e che le immagini non sforassero.

E' fattibile?

Non ho capito esattametne cosa vuoi ottenere, ma credo che se fai a meno dei posizionamenti, riesci a fare il tutto senza avere sovrapposizioni.
Prova ad usare il float, al posto dei posizionamenti (pero` dovrai anche definire una larghezza del contenitore, altrimenti gli oggetti con float vanno a capo). E ricorda di mettere il clear.

[pictor]

Ci spieghi più precisamente cosa devi fare nella pagina? Quale dev'essere il comportamento finale.
Almeno vediamo se c'è qualche soluzione migliore.

Comunque credo che su IE non riuscirai a fare qualcosa del genere..... di solito IE non rispetta gli standard e il contenitore si allarga col contenuto.
Però dipende dal caso....

E poi perchè le immagini hanno posizionamento assoluto?

ciao

[alessio_1976]

se devi usare z-index, la position DEVE essere absolute e non relative...
prova con overflow: auto;

[emnlmn]

Originariamente inviato da alessio_1976
se devi usare z-index, la position DEVE essere absolute e non relative...
prova con overflow: auto;

Chi lo ha detto?
Lo z-index si applica a tutti i blocchi posizionati in modo non statico.

[alessio_1976]

se devi usare lo z-index per sovrapporre del contenuto, senza che il resto del contenuto della pagina slitti, devi mettere la position: absolute;

[Duma]

Originariamente inviato da pictor
Ci spieghi più precisamente cosa devi fare nella pagina? Quale dev'essere il comportamento finale.
Almeno vediamo se c'è qualche soluzione migliore.

In poche parole sto cercando di scrivere un gestore di posizionamento di immagini in linguaggio web: prendo da un DB le immagini di alcuni componenti tecnici e do la possibilità di posizionarli a piacere all'interno di un div. Alla fine con php creo un'immagine che rispecchia la creazione dell'utente.

Passando al concreto, la mia pagina è formata da due parti principali:
div1- area di lavoro - un div a sinistra che contiene le immagini inserite dall'utente. Queste immagini sono spostabili con il drag&drop e per questo hanno una position absolute. Do anche la possibilità di gestire la sovrapposizione delle immagini dando ad ogniuna uno z-index differente e permettendo all'utente di modificarlo.
Quindi è necessario avere una position absolute e uno z-index differente per ogni immagine.
div2- un piccolo div laterale a destra che contiene dei riferimenti alle immagini inserite. Non è necessario dire altro.

ecco come risulta la pagina:

Un'altra funzionalità della pagina è quella di potersi "avvicinare" o "allontanare" dall'area di lavoro: il div1 allo stato originale è al 100% della grandezza e con due comandi è possibile aumentare e diminuire questa percentuale e, quindi, visualizzare più ingrandite o ridotte le immagini.
Il funzionamento di questo comando è molto semplice: per ogni immagine inserita aumento style.width , style.top e style.left di una certa percentuale e il gioco è fatto.
Qui però nasce il problema: se l'utente vuole ingrandire molto il suo piano di lavoro, le immagini nel div1 sforano nel div2 e coprono una parte della pagina.

ecco un esempio di come si sovrappongono

Il comportamento che ottengo non è quello che desidero: essendo le immagini dentro al div1 (quello bianco!) ed avendo l'attributo overflow del div settato ad "auto" pensavo che le immagini non sforassero ma si attivassero le scrollbar nel div1.
Evidentemente non è così: probabilmente aver dato differenti z-index alle immagini le esclude dal calcolo del contenuto, e il div non si allarga.

Per quanto ne so ora o lo z-index o il position:absolute sono il problema e non mi fanno calcolare correttamente la dimensione del contenuto del div.
Ora che ci penso, potrei provare a fare a meno del position:absolute sostituendo nel drag&drop le proprietà top e left con margin-top e margin-left, lasciando position a relative... ma temo che il problema stia nello z-index .


Idee?
grazie

[Mich_]

Ho capito qualcosa di piu`.

Credo che questi articoli possano aiutarti a capire il problema del posizionamento.
I posizionamenti assoluti
Capire i posizionamenti relativi

Hai ragione quando dici che il posizionamento assoluto fa uscire il blocco dalla logica dei blocchi attorno: credo che nel tuo caso devi posizionare anche i contenitori in modo assoluto, per fare in modo che tutti siano sullo stesso livello.

Quando hai ragionato sugli articoli e provato le modifiche, facci sapere come e` andata.

[Duma]

rieccomi qua, vittorioso

La soluzione da te proposta era giusta: dando un position:absolute anche al contenitore delle immagini esso veniva portato allo stesso livello e l'overflow funziona!

Grazie mille a tutti per l'aiuto!