Positioning of DIV and elements using Z-index

Question

I have 2 sections (banner and content section) content section overlaps in the banner because of the design. So I need to bring front the content section.

My problem is my search element, if you are going to add keyword it auto suggest and the suggestion box will appear on the banner just like searching on google. but the problem is the suggestion box also moved the back of the content section (behind the 3 images).

<div class="body">
  <div class="section-banner">
    <div class="search-input">
      <input type="text" value="search button here"> 
        <div class="float-suggestion-box">
        <!--Suggestion Box code here-->
        </div>
    </div>
  </div>

  <div class="section-content">
    <img src="#1"/>
    <img src="#2"/>
    <img src="#3"/>
  </div>
<div>

<stlye>

.section-banner
{
z-index: -1;
position: relative;
}

.section-content
{
z-index: 9;
position: relative;
}

.search-input .float-suggestion-box
{
z-index: 9999;
position: relative;
}
</style>

I need make the float suggestion box at the front. please help me thank you!

remove z-index from .section-banner – Temani Afif Feb 21 '20 at 12:50 — Temani Afif, Feb 21 '20 at 12:50

score 0 · Accepted Answer · answered Feb 21 '20 at 12:57

Just tart typing

var sugg = document.querySelector('.float-suggestion-box');

function openSugg(el){
 if(el.value) {
 sugg.innerHTML = ['abs','def', 'ghi', 'jkl', 'mno', 'pqr'].map(t => "<p>"+t+"</p>").join('');
  }  else {
  sugg.innerHTML = '';
  }
}

.section-banner
{
position: relative;
}

.section-content
{
position: relative;
}
img {
width: 30%;
}
.search-input .float-suggestion-box
{
z-index: 1;
position: absolute;
top:100%;
min-width: 300px;
left: 0;
background-color: #d1d1d1;

}

<div class="body">
  <div class="section-banner">
    <div class="search-input">
      <input type="text" value="search button here" oninput="openSugg(this)"> 
        <div class="float-suggestion-box">
        <!--Suggestion Box code here-->
        </div>
    </div>
  </div>

  <div class="section-content">
    <img src="https://data.whicdn.com/images/172081452/original.gif"/>
    <img src="https://data.whicdn.com/images/172081452/original.gif"/>
    <img src="https://data.whicdn.com/images/172081452/original.gif"/>
  </div>
<div>

Positioning of DIV and elements using Z-index

1 Answers1