CSS elemento tagliato fuori da div

C

colomber

Utente Attivo
4 Dic 2012
232
1
18
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Sono arrivato tardi!
 
C

colomber

Utente Attivo
4 Dic 2012
232
1
18
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?
 
Ultima modifica:
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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)
 
C

colomber

Utente Attivo
4 Dic 2012
232
1
18
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..
 
Ultima modifica:
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
colomber ha scritto:
.....per cui inserisco il nuovo div dentro a quest'ultimo e lo metto fuori sulla destra,.......
Clicca per allargare...
È 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
 
C

colomber

Utente Attivo
4 Dic 2012
232
1
18
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?
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4

Discussioni simili

Alto Basso