The z-index property of the element is causing it to remain fixed and not

One scenario I'm dealing with involves a container where users can input a value into an input field. As they type, an auto-complete box (an element with the z-index property) appears below the input. When the user hits enter, the input value is saved within a tag. For a quick example of the HTML and CSS, you can check out this codepen (same code provided below).

.main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.tag-container {
  align-content: flex-start;
  border: 1px solid black;
  display: flex;
  flex-direction: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: scroll;
  padding: 5px;
  height: 70px;
  width: 600px;
}

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 30px;
  width: 100px;
}

.input {
  height: 25px;
  width: 145px;
}

.auto-complete-box {
  background: #F6F2F2;
  border: 1px solid black;
  position: absolute;
  height: 150px;
  text-align: center;
  width: 150px;
  z-index: 1;
}
<div class="main">
  <div class="tag-container">
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class=input-container>
      <input
        class="input"
        type="text"
        placeholder="input"
      />
      <div class="auto-complete-box">
        Auto Complete Box
      </div>
    </div>
  </div>
</div>

The issue arises when the container begins to scroll (after more tags are added) - the z-index element fails to follow it accordingly. This problem is illustrated in the following codepen example (with the same code provided below).

.main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.tag-container {
  align-content: flex-start;
  border: 1px solid black;
  display: flex;
  flex-direction: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: scroll;
  padding: 5px;
  height: 70px;
  width: 600px;
}

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 30px;
  width: 100px;
}

.input {
  height: 25px;
  width: 145px;
}

.auto-complete-box {
  background: #F6F2F2;
  border: 1px solid black;
  position: absolute;
  height: 150px;
  text-align: center;
  width: 150px;
  z-index: 1;
}
<div class="main">
  <div class="tag-container">
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class=input-container>
      <input
        class="input"
        type="text"
        placeholder="input"
      />
      <div class="auto-complete-box">
        Auto Complete Box
      </div>
    </div>
  </div>
</div>

Is there a way to accomplish my goal using only CSS?

Appreciate any help!

cssz-index

Answer №1

This particular task cannot be achieved using the z-index property alone. You would need to implement a scrolling event in JavaScript.

let tagContainer = document.querySelector('.tag-container')
let autoCompleteBox = document.querySelector('.auto-complete-box')
let input = document.querySelector('.input')

tagContainer.addEventListener('scroll', function (e) {
    if (e.target.scrollTop == e.target.scrollHeight - e.target.clientHeight) {
        autoCompleteBox.style.top = `${tagContainer.offsetTop + tagContainer.offsetHeight - 6}` + "px";
        autoCompleteBox.style.display= "block";
    } else if (e.target.scrollTop < e.target.scrollTop < e.target.scrollHeight - e.target.clientHeight) {
        autoCompleteBox.style.display= "none";
    } 
})
.main {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100vw;
}

.tag-container {
    align-content: flex-start;
    border: 1px solid black;
    display: flex;
    flex-direction: center;
    flex-wrap: wrap;
    gap: 5px;
    overflow-y: scroll;
    padding: 5px;
    height: 70px;
    width: 600px;
}

.tag {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    height: 30px;
    width: 100px;
}

.input {
    height: 25px;
    width: 145px;
}

.auto-complete-box {
    display: none;
    background: #F6F2F2;
    border: 1px solid black;
    position: absolute;
    top: 74px;
    height: 150px;
    text-align: center;
    width: 150px;
    z-index: 1;
}
<div class="main">
    
    <div style="position: relative;">
        <div class="tag-container">
            <div class="tag">Tag</div>
            <div class="tag">Tag</div>
            ...
            <div class=input-container>
                <input class="input" type="text" placeholder="input" />
                <div class="auto-complete-box">
                    Auto Complete Box
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

Consider changing the absolute positioning to position: relative; for your auto-complete-box

You could also use position: sticky; as an alternative solution. 

.main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.tag-container {
  align-content: flex-start;
  border: 1px solid black;
  display: flex;
  flex-direction: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: scroll;
  padding: 5px;
  height: 70px;
  width: 600px;
}

.tag {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  height: 30px;
  width: 100px;
}

.input {
  height: 25px;
  width: 145px;
}

.auto-complete-box {
  background: #F6F2F2;
  border: 1px solid black;
  position: relative;
  height: 150px;
  text-align: center;
  width: 150px;
  z-index: 1;
}
<div class="main">
  <div class="tag-container">
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class="tag">Tag</div>
    <div class=input-container>
      <input
        class="input"
        type="text"
        placeholder="input"
      />
      <div class="auto-complete-box">
        Auto Complete Box
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your PrimeVue experience with the power of Tailwind CSS

After installing PrimeVue, I encountered an issue where the component style was not working, but Tailwind CSS was functioning correctly. It seems that when I install Tailwind first, it works fine until I add Primevue's button component, which then cau ...

htmlcssvue.jstailwind-cssprimevue

What could be causing my JavaScript calculator to malfunction?

I can't seem to figure out why my calculator is malfunctioning and I'm at a loss as to what the issue might be. I even searched on forums like stackoverflow but couldn't find a solution. It seems like there could be an error in the JavaScrip ...

javascripthtmlcss

Sass includes line-specific comments to indicate where a certain definition is located

There seems to be a strange occurrence when I save my file and it's generated by Compass. Each declaration is followed by a comment indicating the line of the sass file, like this: /* line 55, ../sass/app.scss */ In addition, my config.rb file conta ...

csssasscompass-sass

Steps for creating a functional dropdown menu using list items and retrieving the selected values

I am looking to implement a feature with multiple drop-down menus using list items. The functionality I desire is that when the user clicks on a ul element, the list items should drop down. Then, upon clicking on a specific list item, the value of that ite ...

javascriptjqueryhtmlcss

Tips on how to showcase a picture with the focus on the center by enlarging it within

We have a long frame on the page, with an aspect ratio of about 3.5:1 width to height. However, most of the photos being displayed are in a 4:3 ratio, which is larger and not a proper fit for the frame. The customer really wants the long frame and has no ...

htmlcss

Creating links within a single image in HTML?

Is there a way to hyperlink different parts of a single image to various webpages using JavaScript coordinates or any other method? ...

javascripthtmlcss

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

Troubleshooting a Dropdown Menu with z-index and iframe Challenges

Hi there! I'm facing a tricky issue with my dropdown menus and iframes. Despite setting a z-index of 1000 for the dropdown menus, the iframe containing the YouTube video still shows above the menu. Take a look yourself (check the 'shortcodes&apo ...

jqueryiframez-index

Is there a way to show an alert indicating the location of the element that was clicked on the screen?

Here is an example I am working on: link HTML CODE: <ul> <li id="#bar"> <img src="http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png"width=50 height=50></img> <p>ELEMENT 1</p&g ...

javascriptjqueryhtmlcss

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...

htmlcsstwitter-bootstrap-3responsive-designnav

Digits disappearing beyond the screen in a JavaScript calculator

I'm currently working on a small calculator project and encountering an issue where the input numbers continue to fill the display even when it's already full. I'd like to limit the input once the display reaches its maximum capacity. If yo ...

javascripthtmlcss

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

Improving loading time for pages requiring jQuery to render

Currently, I am utilizing the Google PageSpeed service to enhance the loading time of my website. It is hosted on GAE/P, but that detail may not be crucial in this context. There are several resources my page relies on: Bootstrap (css and js) jQuery (js ...

javascripthtmlcssdompagespeed

What is the best way to eliminate line-height from the top of text?

I have a design where an image is floated to the left next to text with a line-height of 2. How can I make sure the top of the image aligns perfectly with the top of the text? Changing the line-height to reduce the space between text and image is not fe ...

htmlcssfontstext-alignment

Show a toast message and reset the form upon submission

Here I have created a contact form using HTML, CSS, and JavaScript. However, I'm facing an issue where the form redirects me to a page displaying the submitted details after clicking the submit button. I want to display a toast message instead and res ...

javascripthtmljquerycssforms

Unable to interact with element within an iframe during automated testing

I've been struggling with this issue for two days now and I just can't seem to solve it. I'm working on an automation Proof of Concept project (although I doubt I'll get the job) where I need to automate a task on an Oracle page. The p ...

javacssselenium-webdriverautomation

The Joys of Delayed Animation with jQuery Isotope

Has anyone successfully modified the CSS3 transitions in jquery Isotope to incorporate a delay for shuffling items, such as using "transition-delay: 0s, 1s;"? I am aiming for a specific shuffle direction - first left, then down - to create a more calculat ...

jquerycssjquery-isotope

Avoiding divs from crashing into each other

I've developed a game feature that allows users to chat. Each message is displayed as an absolute positioned element in the body with user x position set as the "left" CSS property. These messages are animated to move to the top of the screen. I want ...

javascriptjqueryhtmlcss

Difficulty with centering content and setting maximum width

Some time ago I encountered the following code: HTML: <div align="center"> </div> CSS: div{ background-image: image here; background-position: center; background-size: 100% auto; max-width: 1920px; } Recently, I found ...

htmlcss