问题：

如何将html元素放在彼此的顶部？

叶炜

2023-03-14

我正在学习网页设计，试图克隆一个网站的一部分。下面是我的html代码:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Main - Icon Utopia</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="index-styles.css">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <nav>
                <img id="nav-main-icon" src="icon-utopia.png">
                <a id="nav-anchor-blog" href="blog.html">Blog</a>
                <a id="nav-anchor-guides" href="www.iconutopia.com">Guides</a>
                <a id="nav-anchor-free-icons" href="https://iconutopia.com/free-icons/">Free Icons</a>
                <a id="nav-anchor-free-wallpapers" href="https://iconutopia.com/free-phone-wallpapers/">Free Wallpapers</a>
                <a id="nav-anchor-about-me" href="https://iconutopia.com/about/">About Me</a>
                <svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13c0 3.1 1.1 5.9 2.9 8.2l-8.6 8.6c-0.5 0.5-0.5 1.4 0 2 0.5 0.5 1.4 0.5 2 0l8.6-8.6C13.1 24.9 15.9 26 19 26c7.2 0 13-5.8 13-13S26.2 0 19 0zM19 24C12.9 24 8 19.1 8 13S12.9 2 19 2 30 6.9 30 13 25.1 24 19 24z"/></svg>
                <div id="dropdown-guides" class="nav-dropdown">
                    <a id="nav-dropdown-guides-icon-design-guide" href="free-icon-design-guide.html">Icon Design Guide</a>
                    <a id="nav-dropdown-guides-crafting-pixel-perfect-icons" href="crafting-pixel-perfect-icons-the-right-way.html">Crafting Pixel Perfect Icons – The Right Way!</a>
                    <a id="nav-dropdown-guides-build-your-dribbble-audience" href="build-your-dribbble-audience.html">Build your Dribbble audience</a>
                </div>
                <div id="search-bar" class="nav-dropdown">
                    <form>
                        <input id="search" type="text" name="search" placeholder="Search ...">
                    </form>
                </div>
            </nav>
        </header>
    </body>
    <script src="nav.js"></script>
</html>

这里是CSS，我在注释中标记了这个问题的重要选择符:

body {
    margin: 0;
}

nav {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #E5E5E5;
}

#nav-main-icon {
    width: 139px;
    height: 43px;
    position: fixed;
    left: 135px;
    top: 18px;
}

nav a {
    position: fixed;
    top: 28px;
    height: 52px;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #666666;
    text-decoration: none;
}

nav a:hover {
    color: #333333;
}

#nav-anchor-blog {
    left: 748px;
    width: 50px;
}

#nav-anchor-guides {
    left: 802px;
    width: 81px;
}

#nav-anchor-free-icons {
    left: 887px;
    width: 88px;
}

#nav-anchor-free-wallpapers {
    left: 979px;
    width: 127px;
}

#nav-anchor-about-me {
    left: 1110px;
}

#nav-search-icon {
    position: fixed;
    top: 34px;
    left: 1197px;
    width: 18px;
    height: 17px;
    font-size: 14px;
    fill: #666666;
}

#nav-search-icon:hover {
    fill: #E74225;
}

/* IMPORTANT */
.nav-dropdown {
    position: relative;
    top: 80px;
    box-shadow: 0 2px 5px #0000001A;
    border-top: 3px solid #E74225;
    visibility: visible;
}

/* IMPORTANT */
#dropdown-guides {
    left: 776px;
    width: 200px;
    height: 175px;
    padding: 20px;
    z-index: -2;
}

#dropdown-guides a {
    left: 796px;
    width: 160px;
    padding: 10px 20px;
    line-height: 23px;
}

#dropdown-guides a:hover {
    background-color: #00000008;
}

#nav-dropdown-guides-icon-design-guide {
    top: 103px;
    height: 23px;
}

#nav-dropdown-guides-crafting-pixel-perfect-icons {
    top: 146px;
    height: 46px;
}

#nav-dropdown-guides-build-your-dribbble-audience {
    top: 212px;
    height: 46px;
}

/* IMPORTANT */
#search-bar {
    left: 895px;
    width: 280px;
    height: 35px;
    padding: 20px;
    z-index: -1;
}

#search {
    left: 915px;
    top: 103px;
    width: 240px;
    height: 15px;
    padding: 10px 20px;
    border: hidden;
    background-color: #F8F8F8;
    font-family: Arial;
    font-weight: 400;
    font-size: 13.3333px;
    color: #757575;
}

这就是我得到的:

正如您所看到的，搜索栏并没有出现在我想要它出现的地方（就在导航栏的下面），而是在指南的下拉列表的下面。我为两者都设置了z-index，但这似乎并没有解决问题。我不明白为什么我为搜索栏设置的topp没有应用。top显示为298px，而不是80px

共有2个答案

寇景明

2023-03-14

我不知道您是否想要这样的解决方案，但这里有一个解决方案:

/*Changes Here */
#search-bar {
    top: -138px !important;
    left: 1018px;
    width: 280px;
    height: 35px;
    padding: 20px;
    z-index: -1;
}

#search {
    left: 915px;
    top: -500px;
    width: 240px;
    height: 15px;
    padding: 10px 20px;
    border: hidden;
    background-color: #F8F8F8;
    font-family: Arial;
    font-weight: 400;
    font-size: 13.3333px;
    color: #757575;
}

这里是概念验证fiddle-https://jsfiddle.net/mbmarketing4you/7hvqegml/18/

温翔宇

2023-03-14

将position:absolute；添加到#search-bar选择器

更多信息请访问:https://developer.mozilla.org/en-us/docs/web/css/position

希望这能解决您的问题:）

类似资料：

将JLabel放置在彼此的下方

对于我的应用程序，我正在创建一个脚本编辑器。目前，我在一个包含JLabels表示的JPanel中显示了行号。但是，当我添加新的来表示新的行号时，会出现在面板的中心，即使我设置了的和。我想要它，以便标签将出现在彼此的下面。 JPanel类构造函数,它包含所有JLabels：将JLabels添加到JPanel的方法：添加新JLabels时的当前外观：
如何将两个div彼此相邻放置？

问题内容：我希望两个div在包装div中彼此相邻。在这种情况下，绿色div的高度应确定包装纸的高度。我如何通过CSS实现呢？问题答案：浮动一个或两个内部div。浮动一格：或者如果您同时浮动两个子元素，则需要鼓励包装器div包含两个浮动子元素，否则它会认为它是空的而不是在它们周围放置边框浮动两个div：
彼此添加两个数组的元素

问题内容：我有2个这样的Int类型的数组我想添加每个数组的元素，例如arrayFirst [0] + arraySecond [0]，arrayFirst [1] + arraySecond [1]等，然后将其分配给另一个数组，因此数组的结果将类似于 [5、7、24、29] 什么是实现这一目标的最佳实践问题答案：您可以像这样添加两个数组
如何在Firefox和Opera中缩放HTML元素？

问题内容：如何在Firefox和Opera中缩放HTML元素？该属性可以在IE，Google Chrome和Safari中使用，但不能在Firefox和Opera中使用。有什么方法可以将此属性添加到Firefox和Opera？问题答案：试试下面的代码，它将起作用：
如何将HTML元素转换为canvas元素？

问题内容：能够将常规元素临时转换为会非常有用。例如，假设我有一个想要翻转的样式。我想动态创建画布，将其“渲染” 到画布中，隐藏原始元素并为画布设置动画。能做到吗问题答案：抱歉，浏览器无法将HTML渲染到画布中。如果可能的话，这将带来潜在的安全风险，因为HTML可以包含来自第三方站点的内容（尤其是图像和iframe）。如果可以将HTML内容转换为图像，然后读取图像数据，则有可能从其他站点提
将每个字符彼此相同的元素分组的脚本

对于输入：预期产出应为：这里“ABC”、“BCA”和“DEF”、“FED”包含相同的字符，而“OKG”没有包含这些字符的元素 null null
如何指定样式仅适用于HTML中此元素的父元素和该元素的子元素？

本文向大家介绍如何指定样式仅适用于HTML中此元素的父元素和该元素的子元素？，包括了如何指定样式仅适用于HTML中此元素的父元素和该元素的子元素？的使用技巧和注意事项，需要的朋友参考一下使用scoped 属性指定样式仅适用于父元素和元素的子元素- 示例
在HTML元素上禁用拖放功能？

问题内容：我正在开发一个Web应用程序，正在尝试为其提供功能齐全的窗口系统。目前进展顺利，我只遇到一个小问题。有时，当我去拖动应用程序的一部分时（通常是窗口的角落div，应该触发调整大小的操作），Web浏览器变得很聪明，并认为我的意思是拖放东西。最终结果是，当浏览器进行拖放操作时，我的动作被暂停。是否有一种简单的方法来禁用浏览器的拖放？理想情况下，我希望能够在用户单击某些元素时将其关闭，但要重

如何将html元素放在彼此的顶部？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档