Bas CSS ne fonctionne pas lorsqu'il est combiné avec Top?

Question

Je cherche à créer une marge supérieure et inférieure pour un div et quand je précise que la marge inférieure fonctionne correctement:

#RightBar{ 
 
    display: block; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 25px; 
 
    bottom: 150px; 
 
    right: 0px; 
 
    background: Aqua; 
 
}

<div id="RightBar"></div>

Cependant quand j'ajoute la marge supérieure, le fond la marge d'un seul coup ne fonctionne pas du tout - il est presque comme si elle ne lit plus il:

#RightBar{ 
 
    display: block; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 25px; 
 
    bottom: 150px; 
 
    top: 25px; 
 
    right: 0px; 
 
    background: Aqua; 
 
}

<div id="RightBar"></div>

Des idées sur ce qui peut être à l'origine de cela?

Answer 1

Il est parce que vous avez également une déclaration de 100%height, qui ne peut pas se loger entre votre 25pxtop et votre 150pxbottom. Un conflit entraîne l'ignorance de l'une des règles, généralement la plus ancienne. Pour résoudre ce problème, supprimez le height. Vous n'avez pas besoin maintenant que la hauteur peut être automatiquement calculée à partir du top et bottom:

#RightBar{ 
 
    display: block; 
 
    position: fixed; 
 
    width: 25px; 
 
    top: 25px; 
 
    bottom: 150px; 
 
    right: 0px; 
 
    background: Aqua; 
 
}

<div id="RightBar"></div>