我正在尝试使用值 top: 20 left: 20 等来移动我的 hamburger icon，它有一个 position: absolute 等。我已将图标放置在 body 标记之后，并为 body 标记指定了 position: relative。为什么我无法调整汉堡包图标的位置？
JSFiddle 演示(您可能需要将浏览器的大小调整到更小的尺寸才能查看汉堡包图标:http://jsfiddle.net/nqLtvmd3/5/
HTML:
<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>
CSS:
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;
}
}
最佳答案
您需要指定单位:
.mobile-nav-icon {
z-index: 1;
position: absolute;
top: 20px; /* Use PX units */
left: 0;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
关于html - 无法使用绝对位置的值移动元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28391457/