html - 如何将html元素放在一起？

问题描述

我正在通过尝试克隆网站的一部分来学习网页设计。这是我的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为两者设置了，但这似乎并没有解决问题。我无法弄清楚为什么top我为搜索栏设置的设置不适用。top 显示为298px而不是80px

标签： htmlcss

html - 如何将html元素放在一起？

问题描述

解决方案

推荐阅读