CSS elemento tagliato fuori da div

colomber · 17 Mar 2016

Salve ho 2 div uno dentro l'altro, in div all'interno deve essere posizionato fuori del div che lo contiene, devo metterlo a destra distanziato di 20px.

Se uso position absolute quando cambio risoluzione mi cambia nettamente la posizione , se uso position relative il div viene tagliato quando esce dal div che lo contiene.

come posso fare?

criric · 17 Mar 2016

ciao, usa z-index per portarlo in primo piano, esempio

HTML:

<html>
    <head>
        <style>
            .esterno {
                width: 200px;
                height:100px;
                background-color: blue;
                margin: auto;
            }
            .interno {
                width: 200px;
                height:50px;
                background-color: red;
                margin-left: 20px;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div class="esterno">
            <div class="interno"></div>
        </div>
    </body>
</html>

Max 1 · 17 Mar 2016

Sono arrivato tardi!

colomber · 18 Mar 2016

con z-index non funziona viene tagliato lo stesso , forse ho capito il motivo il div contenitore ha impostato overflow:hidden; che però non posso togliere c'è modo di bypassarlo?

Max 1 · 18 Mar 2016

Premettendo che ti sei spiegato molto male e non si capisce bene cosa vuoi ottenere, dovresti spiegarti meglio!
Una cosa che non ho capito, perchè mettere un div dentro ad un altro, per poi volerlo fuori! Se vuoi un div fuori affiancati dovresti metterlo fuori e usare la regola float. (sempre che io abbia capito qualche cosa)

colomber · 18 Mar 2016

il div contenitore è centrato sullo schermo, per cui inserisco il nuovo div dentro a quest'ultimo e lo metto fuori sulla destra, cosi non rovino la centratura del div contenitore. Forse ho risolto uso position absolute e margin-left, in questo modo non viene tagliato, però c'è un'altro problema, su mozilla e chrome tutto ok ma su ie rimane dentro ancora un pezzetto conoscete qualche modo per sistemare la cosa senza aumentare i px del margin-left?

la differenza tra chrome e ie su un margin-left di 30px è circa 10 px tanto..

Max 1 · 18 Mar 2016

colomber ha scritto:
.....per cui inserisco il nuovo div dentro a quest'ultimo e lo metto fuori sulla destra,.......

È questa la tua contradizione! Cosa signiofica lo metto dentro e lo metto fuori sulla destra? O è dentro o è fuori!
Se devi centrare dei contenuti ci sono metodi meno invasivi che i posizionamenti assoluti che poi si sballano con diverse risoluzioni.
Sarebbe opportuno per capire vedere anche un po di ciò che hai fatto! La pagina online sarebbe l'ideale

colomber · 18 Mar 2016

Non è cosi semplice come sembra il div contenitore è quello che contiene il sito intero.. non è centrato con il position absolute, ma con margin:auto, è centrato sullo schermo e cosi deve rimanere, per questo sto evitando di metterlo fuori l'altro div e di usare i float.

Detto questo la mia scelta è quella meno pulita ma meno invasiva. Il problema adesso è IE hai una soluzione per la differenza del margine?

Max 1 · 18 Mar 2016

colomber ha scritto:
.....hai una soluzione per la differenza del margine?

Senza vedere nulla una soluzione sicura non te la so dare, a naso mi viene in mente i commenti condizionali

colomber · 19 Mar 2016

metto un po più margine non sarà uguale nei browser ma va bene.

grazie lo stesso

Cerca

Cerca

CSS elemento tagliato fuori da div

colomber

Utente Attivo

criric

Super Moderatore

Max 1

Super Moderatore

colomber

Utente Attivo

Max 1

Super Moderatore

colomber

Utente Attivo

Max 1

Super Moderatore

colomber

Utente Attivo

Max 1

Super Moderatore

colomber

Utente Attivo

Discussioni simili