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!