html - 无法使用绝对位置的值移动元素？-6ren

html - 无法使用绝对位置的值移动元素？

转载作者：太空宇宙更新时间：2023-11-04 12:20:42

24

4

我正在尝试使用值 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/

24

4

0

文章推荐： java - 如果条件满足，Hibernate 执行 OneToMany

文章推荐： c++ - Visual C++ 字节 *

文章推荐： java - Drools 规则实现具有多个事实

文章推荐： linux - 如何从文件中添加/删除数字或数字范围并重新组织范围

html - 位置相对/绝对
我想要做的是在每个框的蓝色标题之后获取红色文本。看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。你知道为什么即使我将 positi
css - 绝对/相对位置尝试强制滚动条到页面顶部
所以我一直在努力掌握绝对和相对定位的诀窍。关于这个主题有很多教程和问题，我已尽力理解它们。除了这一点，我大部分时间都很好。我正在创建一个页面，其中有较小的缩略图图像，用户可以选择单击并展开图像。为此，
html - 绝对/相对定位问题
下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级
html - 将标题按钮居中而不使其成为静态/绝对
我目前正在创建一个看起来有点像这样的固定 header 。 https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568 Logo 始终位于左侧，小按钮始终位于
css - “绝对”位置元素在放置在父级范围之外时不显示？
我怎样才能得到一个绝对定位的子 div，当它放在父 div 的范围之外时不显示？ https://jsfiddle.net/knp9ebys/9/ .papa { background:red;
html - CSS定位相对于固定/绝对
如果我对 CSS 显得相当“菜鸟”，我深表歉意。我一直在尝试设置以下... #0 { width: 100%; height: y; border: 1px solid black; } #
css - 绝对/相对定位布局溢出
很长一段时间以来，我一直在摆弄一个特定的布局问题，但我显然采用了错误的方式。以下是分解为基本组成部分的方法: SOME HEADER
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
c# - 绝对 URL 不适用于虚拟目录？
我创建了几个虚拟 Controller ，我希望能够从当前的 http 请求中获取 url。例如: http://www.site.com/app_1/default.aspx ===> http:
haskell - protected 绝对/相对文件路径类型
我想知道是否有一个库在某处提供受新类型保护的 FilePath 类型。我找到了我想要的http://hackage.haskell.org/package/darcs-2.8.4/docs/src/D
Java 数据库 - 绝对 URL
如果我尝试使用以下方式连接到我的嵌入式数据库: private static String url = "jdbc:sqlite:~/hr4413/pkg/sqlite/Models_R_US.db"
python - Django 绝对 url
所以我是 django 的新手，我一直在研究 PHP CodeIgniter，其中将绝对 URL 放入 href 我通过调用 URL 帮助程序使用了一个名为 base_url 的函数它给出的输出类
jquery - Div 水平居中 NO 绝对
我有一个小问题。我在其他 div 中有一些图像元素的容器 div。像这样的东西: 我需要将容器垂直居中，但我不能使用顶部:-healfHeight； mar
javascript - IE8 绝对/相对定位元素不显示
我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当
css - 绝对 td 的匹配高度
我正在尝试设置一个卡住列，唯一需要解决的问题是同一行上其他 td 的高度不会扩展以匹配绝对定位 td 的高度。由于卡住标题中的文本是任意的，它可以跨越多行。如果它不是绝对定位的，那么这将迫使同一行中
css - 绝对 div 居中和响应？
这个问题在这里已经有了答案: Centering text vertically and horizontally in a div (1 个回答) 关闭 5 年前。
css - 如何设置Div(绝对)宽度100%
当它的位置绝对时，我试图使一个框宽度为 100%？下图是我想要做的 https://i.imgur.com/qMaT361.gif float .box1 { position:re
javascript - 绝对 HTML 元素和浏览器滚动
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
css - 绝对 Div 填充窗口的剩余部分
我有 3 个 div，都是 positioned: absolute，但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。我知道这听起来很菜
javascript - 绝对 .position() 值
这个问题在这里已经有了答案: Retrieve the position (X,Y) of an HTML element (32 个答案) 关闭 8 年前。有时候，当我请求某个对象的.posit

首页

博学

6Ren·AI

商城

html - 无法使用绝对位置的值移动元素？