Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1

    Ereditarietà di classi e posizionamento

    Ciao a tutti,

    ho un dubbio per quanto riguarda gli attributi di posizionamento delle classi.

    Questo è il codice HTML:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    
    <body>
    
    
        <div id="mainPage">
       
            <div class="box">CIAO </div>
            
            
            <div id="bot" >
            
                <div class="box">
                CIAO
                    <div class="pippo"></div>
                    <div class="pluto"></div>
                </div>
            
            </div>
        
        
        </div>
    
    
    </body>
    </html>

    Questo il CSS:

    codice:
    @charset "utf-8";
    /* CSS Document */
    
    
    #mainPage{
        width:780px;
        height:980px;
        padding:10px;
        position:relative;
        border:1px solid #000; }
        
    .box{
        color:red;
        position:absolute;
        top:50px;
        left:20px;
        width:300px;
        height:400px;
        border:1px solid #B3B25A;
        z-index:10;}
        
    #bot{
        position:absolute;
        bottom:10px;
        right:10px;
        z-index:10;
        width:300px;
        height:400px;
        padding:0px;
        border:1px solid #BB44BB;}
        
    #bot .box{
        color: blue;
        position:relative;
        width:280px;
        height:380px;
        z-index:15;
        padding:10px;}            
        
    .pippo{
        position:absolute;
        top:30px;
        left:10px;
        z-index:15;
        width:50px;
        height:50px;
        border:1px solid #F40000;}
        
    .pluto{
        position:absolute;
        bottom:20px;
        right:10px;
        width:100px;
        height:50px;
        z-index:15;
        border:1px solid #2DB51E;}

    Il problema è che la classe "box" dentro all'id "bot" sembra ereditare gli attributi di posizionamento della classe "box" precedentemente definiti, ma gli attributi relativi al testo sono correttamente differenziati.

    Mi sono perso qualche regola sull'ereditarietà degli attributi delle classi relativi al posizonamento?

    Grazie mille a tutti!

  2. #2
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    non capisco bene la domanda. Cosa avrebbe dovuto succedere in base alle tue aspettative?

  3. #3
    Non dovrebbe ereditare le proprietà di posizionamento secondo me, dove sbaglio?

  4. #4
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Ma intendi il position:relative/absolute? infatti, non sta ereditando niente. Che poi, non credo nemmeno si possa parlare di ereditarietà. Abbiamo una classe di cui vengono ridefinite alcune cose in caso sia figlia di un id.

  5. #5
    Mi dovrei ridefinire anche position relative e absolute?

  6. #6
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    dipende da quello che vuoi fare. Se mi dici quale dovrebbe essere il risultato finale ti posso rispondere più esaurientemente

  7. #7
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Cioè se tu metti la classe box a relative l'unica cosa che cambia rispetto al metterla subito ad absolute, dal momento che hanno la stessa origine di riferimento per le coordinate, è che la relative tiene conto del padding del padre mentre quando è absolute si "sgancia" dal padre tenendo in considerazione solo la sua origine ma non i suoi padding.

  8. #8
    Io mi aspetterei che #bot.box (cioè il div con classe box all interno del div id bot) sia perfettamente sovrapposto al div con id bot.
    In questo modo #bot.box, che ho dichiarato relative, diventa il punto di origine per il posizionamento dei div interni (pippo e pluto).

    Ora, so che basterebbe semplicemente cambiare nome, mi stavo solo chiedendo come mai non ottenessi il risultato corretto.

    Spero di essermi spiegato bene ��

    Grazie!!

  9. #9
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Certo, l'origine è cambiata ma rimangono i top e left. Dovresti quindi ridefinirli a 0. Oppure anzichè definire #bot .box a relative, lo metti a static e i top e left non verranno considerati

  10. #10
    così facendo pippo e pluto non saranno più posizionati rispetto a #bot.box, giusto?
    perché se gli tolgo relative a #bot.box non sarà più il riferimento di origine per pippo e pluto

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.