I am trying to get the search results to fall just below the search bar. At the moment the search results fall below and to the left but shift the rest of the page down.
I want the search results to fall below the search bar and appear above the rest of the page instead of pushing it down like most other search bars. I have tried a z-index but that is not working.
Here is that specific part current HTML sorry about the length:
<html>
<head></head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<a href="/" class="navbar-brand" style="font-family: 'Libre Baskerville', serif;">contangoX</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="/platform" class="nav-link">Platform</a>
</li>
<li class="nav-item">
<a href="/blog" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="/contact" class="nav-link">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="continair-fluid">
<div id="logo-img" class="container-fluid p-2">
<img id="logo" src="https://financialmodelingprep.com/image-stock/DOCU.png" alt="">
<h1 id="title">DOCU</h1>
<h1 id="CompName" display="inline">DocuSign, Inc.</h1>
<h1 id="sector" display="inline">Technology</h1>
<h1 id="industry" display="inline">
<a style="pointer: cursor; text-decoration: none; color: black;" href="/industryview/Software—Application">Software—Application</a>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path>
</svg>
</h1>
<a id="website" href="https://www.DocuSign.com" target="_blank" display="inline">https://www.DocuSign.com</a>
<h1 id="marketcap" display="inline">Market Cap: 8.33 (B)</h1>
<div id="searchdiv" style="display: inline">
<input style="display: inline; padding: 5px; border-radius: 10px" id="inputsearch" name="searchcompany" type="text" placeholder="Enter ticker">
</div>
</div>
<div style="z-index: 2; width: 30%">
<div class="bg-white rounded" style="display: block; margin-top: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; height: 220px; overflow: auto; width: 100%; overflow-wrap: break-word;" id="companiesreturned">
<ul style="list-style: none;" id="listofcompanies">
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AA">AA - Alcoa Corporation</a>
</li>
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AAL.L">AAL.L - Anglo American plc</a>
</li>
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AAF.L">AAF.L - Airtel Africa Plc</a>
</li>
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AALB.AS">AALB.AS - Aalberts N.V.</a>
</li>
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AAPL">AAPL - Apple Inc.</a>
</li>
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AAL">AAL - American Airlines Group Inc.</a>
</li>
<li style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;" id="comps">
<a style="font-size: 18px; z-index: 2; padding: 5px; background-color: none; text-decoration: none; display: block;" id="searchresults" href="/companyview/AAON">AAON - AAON, Inc.</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
These are the results from a search of ‘AA’. Any ideas why the z-index isn’t working? All css is in the HTML. The container of the results (id = companiesreturned) is displayed none until a search is done and JavaScript changes display to block showing the list of results.
move the div containing the search results into the div containing search box, set position relative on the div containing the search box, set position absolute on the div containing the search results, see developer.mozilla.org/en-US/docs/Web/CSS/z-index, set a top value of 20px or something on the search results div, only looked quickly theres a lot going on in there
z-index is the last part of getting it to work, not the first. There’s a beginner’s on MDN if you want to learn more.