Блог

Главная - Вопросы по программированию - Как расположить html-элементы друг над другом?

Как расположить html-элементы друг над другом?

#html #css

#HTML #css

Вопрос:

Я изучаю веб-дизайн, пытаясь клонировать часть веб-сайта. Вот мой 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 Sansamp;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

Ответ №1:

Добавить position: absolute; в #search-bar селектор

Дополнительная информация о свойстве position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Ответ №2:

Я не знаю, хотели ли вы исправить подобное, но вот способ это исправить:

 /*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;
}

Вот доказательство концепции скрипки — https://jsfiddle.net/mbmarketing4you/7hvqegmL/18 /

Ответ №3:

 body {
    margin: 0;
}
header{
display:flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
align-items: center;
border-bottom: 1px solid #E5E5E5;
}
nav {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul {margin: 0; padding: 0;display: flex; align-items: center; justify-content: flex-end; width: 100%;align-items: center;}
nav ul li {
display: inline-flex; list-style: none;
position: relative;
height: 80px;
align-items: center;
}
nav ul li .nav-dropdown {
display: none;
position: absolute;
    top: 100%;
    width: 200px;
    border: 1px solid #ddd;
    border-top: 2px solid red;
    background: #FFF;
}
nav ul li:hover .nav-dropdown {
display: block;
}
#nav-main-icon {
    width: 139px;
    height: 43px;
}

nav a {
    height: 80px;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    display: inline-flex;
    margin: 0 0 0 10px;
    align-items: center;
}

nav a:hover {
    color: #333333;
}


#nav-search-icon {
    width: 14px;
    fill: #666666;
    margin-left: 10px;
}

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

#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;
}
#search-bar {
right: 0;
}  
 <!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 Sansamp;display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
        
                <img id="nav-main-icon" src="icon-utopia.png">
            <nav>
            <ul>
            <li>
                <a id="nav-anchor-blog" href="blog.html">Blog</a>
            </li>
            <li>
                <a id="nav-anchor-guides" href="www.iconutopia.com">Guides</a>
            </li>
            <li>
                <a id="nav-anchor-free-icons" href="https://iconutopia.com/free-icons/">Free Icons</a>
                <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>
             </li>
             <li>
                <a id="nav-anchor-free-wallpapers" href="https://iconutopia.com/free-phone-wallpapers/">Free Wallpapers</a>
                </li>
                <li>
                <a id="nav-anchor-about-me" href="https://iconutopia.com/about/">About Me</a>
                </li>
                <li>
                <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="search-bar" class="nav-dropdown">
                    <form>
                        <input id="search" type="text" name="search" placeholder="Search ...">
                    </form>
                </div>
               </li>
               </ul>
                
                
            </nav>
        </header>
    </body>
    <script src="nav.js"></script>
</html>

Я редактирую ваш html-код и css-код. Вам нужна такая структура. Для выпадающего списка вам нужно понимать, что выпадающий список открывается при наведении родительского div.