I am currently working on a Navigation Bar and I need some assistance with positioning the search Icon within the search bar. Is it recommended to use absolute positioning in a relative container for this purpose?
The form I have includes search-ct and an input field with the image placed next to it.
.navbar {
width: 100%;
height: 80px;
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.navbar img {
width: 100px;
height: 70px;
}
.search-ct {
width: 20%;
box-sizing: border-box;
align-items: center;
display: flex;
flex-wrap: no-wrap;
}
.search-icon {
position: absolute;
width: 25px!important;
height: 30px!important;
display: flex;
}
.search-input {
height: 40px;
border: 2px solid transparent;
border-radius: 70px;
text-indent: 10px;
}<ul class='navbar'>
<img src='../assets/images/favicon.png' class='img-1' />
<form class='search-ct'>
<input class='search-input' placeholder='Search'>
<img class='search-icon' src='./assets/images/search.png'>
</form>
<div class='container-nav-buttons' style='display:none;'>
<button><a>HOME</a></button>
<button><a>SHOP</a></button>
<button><a>APPS</a></button>
<button><a>CONTACT</a></button>
</div>
<svg class='svg-nav' version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">...moreSVGcodehere...</svg>
<img src='../assets/images/account.png' class='acct-img'>
</ul>I would appreciate some guidance on how to achieve this layout effectively.