Question

我正在尝试使用值hamburger icon等移动position: absolute top: 20 left: 20 body。我已将图标放在body标记之后并给出了position: relative标记<body> <div class="glyphicon glyphicon-menu-hamburger mobile-nav-icon"></div> <div class="container-fluid"> <div class="row"> <div class="nice-blue-bg"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4"> <div class="logo"> TESTING </div> </div> <div class="col-xs-12 col-md-8"> <nav class="main-nav"> <ul> <li class=""> <a href="#">Home</a> <a href="#">About Me</a> <a href="#">Latest Work</a> <a href="#">Contact Me</a> </li> </ul> </nav> </div> <div class="clearfix"></div> </div>。为什么我无法调整汉堡图标的定位？

JSFiddle演示（您可能需要调整尺寸以缩小尺寸以查看汉堡包图标：http://jsfiddle.net/nqLtvmd3/5/

HTML：

body {
    background: #fff;
    width: 100%;
    position: relative;
}

a:hover, a:focus { 
    text-decoration:  none;
    color: yellow;
}
/* Fix firefox issue with images not resizing whilst using bootstrap class */
.img-responsive {
    width: 100%;
}

.nice-blue-bg {

    background: -webkit-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* FF3.6+ */
    background:     -ms-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* IE10 */
    background:      -o-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* Opera 11.10+ */
    background:         linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* W3C */
    width: 100%;
    height: 620px;
}


.logo {
    font-family: Lato;
    color: white;
    font-size: 50px;
    font-weight: 100;
    margin-top: 80px;
}

.main-nav {
    margin-top: 90px;
}

.main-nav ul {
    list-style: none;
    padding: 0;
}

.main-nav li, .main-nav a {
    display: inline-block;
    margin-left: 30px;
    float: right;
}

.main-nav a {
    text-decoration: none;
    color: #eaeaea;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;

}

.main-nav a:hover {
    text-decoration: none;
    color: white;
}



.mobile-nav-icon {
    display: none;
}

@media (max-width: 991px) { 

    /* This is the hamburger icon I want to be able to move */
    .mobile-nav-icon {
        z-index: 1;
        position: absolute;
        top: 20;
        left: 0;
        display: block;
        color: white;
        font-size: 30px;
        cursor: pointer;

    }

    .logo {
        text-align: center;
    }

    .main-nav {
        margin-top: 20px;
        display: none;
    }

    .main-nav li {
        float: none;
        text-align: center;
        display: block;
    }

    .welcome {
        text-align: center;
    }

    .main-nav li, .main-nav a {
        margin-left: 0;
        display: block;
        float: none;
    }

    .main-nav a {
        padding: 20px 0 20px 0;
        border-top: 1px solid #c2c2c2;
        margin-left: -15px;
        margin-right: -15px;
    }

    .main-nav a:last-child {
        border-bottom: 1px solid #c2c2c2;
        margin-left: -15px;
        margin-right: -15px;
    }


    .nice-blue-bg {
        width: 100%;
        height: auto;
        padding-bottom: 30px;
    }



}

CSS：

{{1}}

Answer 1

您需要指定单位：

.mobile-nav-icon {
    z-index: 1;
    position: absolute;
    top: 20px; /* Use PX units */
    left: 0;
    display: block;
    color: white;
    font-size: 30px;
    cursor: pointer;

}

无法使用绝对位置的值移动项目？

1 个答案: