html - 无论我做什么，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 并使导航方 block 消失时，安全导航方 block 就是这样，页面上的其他元素不会改变位置。

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>