我试图在导航栏下方进行搜索输入，但是当我使用绝对位置时，相对于我的图标，图标和搜索输入都会消失。但如果我不把它放在相对的位置，它就会出现。我希望我的搜索输入出现在该绿色区域之外。 我什至尝试使一些上部 div 相对，但随后搜索输入滚动到绿色区域。
我认为绝对位置会使元素脱离流程。那么为什么在检查器中它存在但我看不到它。我需要绿色区域外的搜索输入。 （抱歉无法给出图标，你可以在img标签中放入任意图片来查看问题） HTML代码 (
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<!-- google-fonts icon link -->
</head>
<body>
<header class="header">
<!-- Navbar's code -->
<nav class="nav-container">
<div class="nav-div">
<a class="nav-li" href="#">Home</a></li>
<a class="nav-li" href="#">Library</a>
<a class="nav-li" href="#">navigation</a>
<a class="nav-li" href="#"> Links</a>
<a class="nav-li" href="#">Archive</a>
</div>
<div class="nav-div">
<a href="#">new</a>
<div class="search-box">
<div class="search-toggle">
<img class="search" src="./svg/search.svg" alt="">
<img class="close" src="./svg/close.svg" alt="">
<div class="search-field">
<input type="text" placeholder="Search...">
<img src="./svg/search2.svg" alt="">
</div>
</div>
</div>
<a href="#"><p>Login</p></a>
</div>
</nav>
</header>
</body>
</html>
） CSS 代码
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #ffffff;
overflow-x: hidden;
}
body {
min-height: 100vh;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr auto;
}
/* Google-fonts icon style (can be changed) */
.material-symbols-rounded {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}
.material-symbols-outlined {
font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 20;
}
/* Actual styling starts here */
/* Navbar styling starts */
.header {
background-color: #128d50;
height: 3.0625rem;
}
.nav-container {
padding: 0 11.71875%;
height: 3.0625rem;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
font-size: 1rem;
flex-grow: 1;
justify-content: space-between;
gap: 2rem;
}
.nav-container a {
color: #ffffff;
text-decoration: none;
}
.nav-container a:hover {
text-decoration: underline;
}
.nav-div {
display: flex;
gap: 1.875rem;
align-items: center;
}
.nav-div img{
width: 1.5625rem;
}
.nav-div .search-toggle{
display: flex;
align-items: center;
justify-content: center;
}
/* search animation */
.nav-div .search,
.nav-div .close{
position: absolute;
cursor: pointer;
transition: all 0.3s ease;
}
.search-toggle .close{
opacity: 0;
pointer-events: none;
}
.search-toggle.active-search .close{
opacity: 1;
pointer-events:auto;
}
.search-toggle.active-search .search{
opacity: 0;
pointer-events: none;
}
.search-box{
position: relative;
}
.search-box .search-field{
position: absolute;
top: 30px;
right: 20px;
height: 50px;
width: 300px;
}
.search-field input{
height: 100%;
width: 100%;
}
.search-field img{
position: absolute;
}
.nav-container li {
list-style: none;
}
这是给我带来问题的代码
.search-box{
position: relative;
}
.search-box .search-field{
position: absolute;
top: 30px;
right: 20px;
height: 50px;
width: 300px;
}
我只是无法使搜索框位置相对于搜索字段位置绝对。我需要绿色区域外的搜索输入。
将 CSS 更新为
.nav-container {
position: relative;
padding: 0 11.71875%;
height: 3.0625rem;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
font-size: 1rem;
flex-grow: 1;
justify-content: space-between;
gap: 2rem;
}
.search-box {
position: relative;
}
.search-field {
position: absolute;
top: 50px;
right: 0;
height: 50px;
width: 300px;
}
.search-field input {
height: 100%;
width: 100%;
}
.search-field img {
position: absolute;
}