Div не меняет позицию независимо от того, что я делаю

Question

Я пытаюсь изменить положение div «home_square», но когда я делаю это, просто остаюсь в том же месте, пожалуйста, помогите.

<div class="nav_square" class="home_square"></div> 
     <div class="nav_square" class="specials_square"></div> 
     <div class="nav_square" class="jobs_square"></div> 
     <div class="nav_square" class="league_square"></div> 
     <div class="nav_square" class="contact_square"></div> 
<!--POSITION SAFE NAV SQUARES--> 
     <div class="nav_square" class="safe_nav_squares" class="home_square"></div> 
     <div class="nav_square" class="safe_nav_squares" class="specials_square"></div> 
     <div class="nav_square" class="safe_nav_squares" class="jobs_square"></div> 
     <div class="nav_square" class="safe_nav_squares" class="league_square"></div> 
     <div class="nav_square" class="safe_nav_squares" class="contact_square"></div> 

CSS:

.nav_square { 
    background-color:green; 
    width:100px; 
    height:2px; 
    z-index:22; 
} 
.home_square { 
    position:relative; 
    left:20px; 
} 
.safe_nav_squares { 
    background-color:black; 
    z-index:-1; 
} 

Безопасные квадраты нав просто так, когда я добавить JavaScript и сделать нав квадраты исчезают, что другие элементы на странице не изменится положение.

Answer 1

Дайте попробовать с этим кодом ....

<div class="nav_square home_square"></div> 
      <div class="nav_square specials_square"></div> 
      <div class="nav_square jobs_square"></div> 
      <div class="nav_square league_square"></div> 
      <div class="nav_square contact_square"></div> 
    <!--POSITION SAFE NAV SQUARES--> 
      <div class="nav_square safe_nav_squares home_square"></div> 
      <div class="nav_square safe_nav_squares specials_square"></div> 
      <div class="nav_square safe_nav_squares jobs_square"></div> 
      <div class="nav_square safe_nav_squares league_square"></div> 
      <div class="nav_square safe_nav_squares contact_square"></div> 

Answer 2

В HTML классы должны быть разделены пробелами, все в пределах одного атрибута. Когда вы это делаете, также имейте в виду, что порядок имеет значение - правила от позже классы всегда переопределяют ранее.

Пример:

<div class="foo blah"> 
    I have two classes, foo and blah. When they disagree, blah wins. 
</div> 

Вот учебник, который описывает его более подробно: http://www.avajava.com/tutorials/lessons/how-do-i-assign-multiple-classes-to-an-element.html

Вот полезный Stack Overflow вопрос: How to assign multiple classes to an HTML container?