Far seguire il collasso voluto di un Float permettendo la sovrapposizione dei figli

**Vonavi** · 26-03-2013, 18:36

Salve gente,
ok, il titolo è abbastanza confuso, ma non mi veniva niente di meglio in mente, anche perché la domanda è pure ben complessa.
Innanzitutto immaginatevi la seguente struttura:

codice:

<div class="collassato">
    <div></div>
</div>
<div class="seguente">
    <div></div>
<div>

Con il seguente codice CSS:

codice:

.collassato { height: 40px }

.collassato > div {
    float: left;
    height: 80px;
}

.seguente { height: 400px }

.seguente {
    float: left;
    height: 200px;
}

Ora, il primo DIV > DIV, avendo un'altezza più alta del padre ed essendo flottato, fuoriesce dallo stesso e di conseguenza si sovrappone al secondo DIV principale. Tutto normale fino a qui, perché è un effetto che ho voluto ottenere io, proprio per ottenere una sovrapposizione con i float.
Il problema è che, il secondo DIV > DIV, vorrei farlo posizionare al di sotto del primo DIV > DIV che dovrebbe sovrapporlo, ma se metto il float: left, esso segue il DIV > DIV sovrapposto, mentre se aggiungo anche il clear: left, esso si abbassa e non si "sottopone" al DIV > DIV sovrapposto.
Cosa posso fare? Devo per forza passare al posizionamento assoluto? Possibile che con ii float questo comportamento di sovrapposizione non è ottenibile seppure il collasso dei float è un comportamento più che leggittimo?

In sostanza voglio attenere questo:

**Nobody33** · 26-03-2013, 19:17

Il codice che hai postato è un pò povero.
Posta il codice completo e si risolve.

Ma, in linea generale, si imposta

codice:

z-index: 1;

al contenitore che sta dietro e un z-index più alto a quello che deve stare in avanti.

Inoltre, con

codice:

position: absolute;

insieme al z-index vai sul sicuro.

saluti

**Vonavi** · 26-03-2013, 19:49

@Nobody: il codice che ho postato è già il codice completo della pagina

Il tuo discorso poi è sicuramente giusto, se non fosse per il fatto che io vorrei ottenere una sovrapposizione con i float, non con position e da quel che mi risulta, lo z-index è applicabile soltanto agli elementi con position pari a relative, absolute e fixed, perciò non utilizzabile con i float.

Ciò che sto cercando di ottenere è di sfruttare il così detto "collasso dei float" per creare sovrapposizioni, come nel caso proposto.
Peccato però che il secondo DIV > DIV pure posizionandolo in modi strambi, va a posizionarsi sopra il primo sovrapposto DIV > DIV.

Mi sa tanto che questo "collasso dei float" non serve proprio a niente, se non per rompere le scatole a noi sviluppatori che dobbiamo utilizzare anche il clearing o l'overflow.

**Nobody33** · 26-03-2013, 20:10

Il float la puoi impostare creando un "wrapper ( div involucro)" intorno a tutto questo casino.

Dentro questo, ci metti tutto quello che vuoi, ma mi sa che ci devi andare proprio con le posizioni, anche perché spesso ad IE non piaccione queste cose che cerchi di fare tu senza una posizione.

Saluti

**Prill** · 27-03-2013, 09:28

la sovrapposizione puoi ottenerla così:

codice:

.collassato { height: 40px; background-color:yellow }

#sovrapposto {
    float: left; width:100%;
    height: 80px;
}
#sovrapposto div {
    width: 300px; margin:0 auto;
    height: 80px; background-color:pink;
}
.seguente { height: 400px; background-color:green; color:#FFFFFF; margin-top:10px }

-->
</style>
</head>

<body>
<div class="collassato">
    <div id="sovrapposto"><div>bla bla</div></div>
</div>
<div class="seguente">
    <div>bla bla</div>
</div>

ma con ie7 il div seguente va a coprire quello flottante.
Inoltre è una sovrapposizione che riguarda i div ma non i loro contenuti (se inserisci del testo nel div .seguente puoi osservare che va a disporsi al di sotto del div che flotta). Non pare la tua una soluzione stabile e solida.
Più sicura quella proposta da Nobody33 che riguarda i posizionamenti assoluti: un contenitore con posizionamento relativo, i due div superiore e inferiore, distanziati col margin e il div centrale con position:absolute

**Vonavi** · 27-03-2013, 16:42

@Nobody33: purtroppo questi due DIV principali, non posso metterli dentro ad un unico float contenitore, perché devono stare su due righe completamente e semanticamente separate. Per il resto credo che tu abbia ragione, meglio usare i posizionamenti assoluti e relative, che sono stati inventati apposta, però avevo proprio voglia di sfruttare in qualche modo questo "collasso dei float", altrimenti completamente inutile.

@Prill: ottima la tua soluzione! Però non riesco a capirne bene il meccanismo, cioè, tu sul primo DIV principale hai piazzato un altro DIV con float left senza contenuto inline, ma con un altro DIV all'interno e soltanto in questo i vari contenuti. Sapresti spiegare il perché la mia soluzione non funzionava e la tua invece funziona? QUali effetti scaturiscono da queste soluzioni? Per il resto, è pur vero che la soluzione di Nobody33, di usare i posizionamenti, è ormai una tecnica consolidata e che conosco bene, ma questo diciamo che è una sorta di esperimento che sto facendo al fine di capire se sia possibile effettuare sovrapposizioni sfruttando il così detto "collasso dei float", senza scomodare i vari posizionamenti, insomma, un modo per creare davvero un layout qualsiasi soltanto basato sulla proprietà float. Il fatto che il secondo DIV principale, assieme ai suoi figli debba andare sotto al primo DIV > DIV, è un fatto voluto, indipendentemente dal fatto di coprire il testo o altro! In pratica, prova ad immaginare il primo DIV > DIV come una sorta di contenitore di un logo che va a sovrapporsi sul secondo DIV principale, che invece è soltanto uno slider con immagini che scorrono e quindi può essere serenamente sovrapposto, creando anche un bel effetto soprattutto con box-shadow sul primo DIV > DIV

P.S: non avevo notato che il testo dentro al DIV seguente si sposta al di sotto del DIV floattato, ma il comportamento che vorrei ottenere è che il DIV seguente vada ad incastrarsi insieme a tutti i suoi contenuti al di sotto del primo DIV > DIV che dovrebbe starli sotto

Una sorta di position absolute, ma soltanto sfruttando i float

**Prill** · 27-03-2013, 17:12

tu sul primo DIV principale hai piazzato un altro DIV con float left senza contenuto inline, ma con un altro DIV all'interno e soltanto in questo i vari contenuti.

semplicemente perché il tuo div doveva essere centrato e con il float si sarebbe allineato a sinistra. Conoscendo la larghezza del contenitore, sapendo anche la larghezza del div flottante, non è necessario aggiungere un div interno, basta specificare un margin-left.

Quanto al funzionamento: nel tuo codice avevi impostazioni diverse per la stessa classe, mancava la chiusura dell'ultimo div (che era invece l'apertura di un altro), e il float sul div che seguiva non era necessario.

se non ti piacciono i posizionamenti assoluti puoi anche usare quelli relativi con margini negativi (a me piacciono poco), col float difficilmente riuscirai

**Vonavi** · 27-03-2013, 23:37

#Prill: ho capito il tuo sistema, comunque la mancata chiusura del DIV è stata un mia svista qui sul forum, mentre nel codice vero e proprio era tutto a posto

Per il resto, non è che non mi piacciono i posizionamenti assoluti o relativi, solo che questo era un mio piccolo esperimento che volevo fare per capire se il collasso dei float si poteva sfruttare per il posizionamento degli elementi della pagina, tutto qui

Grazie per le dritte

Discussione: Far seguire il collasso voluto di un Float permettendo la sovrapposizione dei figli

Strumenti discussione

Ricerca discussione

Visualizza

Far seguire il collasso voluto di un Float permettendo la sovrapposizione dei figli

Permessi di invio