Fixed position of the element within a parent stacking context

How can I ensure that the #icon appears below the #dropdown in the following example?

https://i.stack.imgur.com/GoBcR.png

The position: fixed of #container seems to be creating a new stacking context for its children. Changing the position value fixes the issue, but that is not an option.

  • #icon must use position: absolute
  • #container must have position: fixed
  • #dropdown should remain a child element of #container
  • #dropdown should have position: absolute

I am seeking a CSS-only solution. Check out the example playground here.

htmlcss

Answer №1

To rearrange the positioning of the parent element of #icon so that it aligns within the same stacking context as #dropdown:

<script src="https://cdn.tailwindcss.com"></script>

<div class="relative p-10">
  <div id="container" class="fixed w-[700px] rounded-lg border border-neutral-200 bg-white p-6">
    <div class="flex items-center justify-between">
      <div class="h-3.5 w-full max-w-[130px] rounded-full bg-gray-200 text-xl font-bold leading-none !text-transparent text-slate-800">Open tasks</div>
      <div class="relative mt-2">
        <button class="relative h-9 w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400 sm:text-sm sm:leading-6" id="headlessui-listbox-button-:Rd5jdm:" type="button" aria-haspopup="listbox" aria-expanded="true" data-headlessui-state="open" aria-controls="headlessui-listbox-options-:ru:">
          <span class="flex items-center"><div class="h-[12px] min-w-[64px] cursor-pointer rounded-full bg-gray-200 leading-none !text-transparent">Sorting by most recent</div></span
          ><span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
            ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-gray-400"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg
          ></span>
        </button>
        <ul id="dropdown" class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" aria-labelledby="headlessui-listbox-button-:Rd5jdm:" aria-orientation="vertical" id="headlessui-listbox-options-:ru:" role="listbox" tabindex="0" data-headlessui-state="open" aria-activedescendant="headlessui-listbox-option-:r12:">
          <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" id="headlessui-listbox-option-:rv:" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
            <div class="flex items-center"><div class="h-[12px] w-[64px] rounded-full bg-gray-200 leading-none !text-transparent"></div></div>
            <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-200"
              ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l 3.894 3.893 7.48-9.817 a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg
            ></span>
          </li>
          <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" id="headlessui-listbox-option-:r10:" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
            <div class="flex items-center"><div class="h-[12px] w-[64px] rounded-full bg-gray-200 leading-none !text-transparent"></div></div>
          </li>
            ...

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

The styling of Material UI's contained button is being overridden by MuiButtonBase-root

Currently, I am working with material-ui in a react project. In one of my components, I have incorporated a simple contained button: <Button variant='contained' color='primary'> Edit</Button> However, despite setting it as ...

cssreactjsbuttonmaterial-ui

Transform the functionality of DIV and UL to mimic that of a SELECT element

I am attempting to update the text of the <span class="hideSelect"> element to match the text of the selected <li>, so that it functions like a <select> element. CSS: .myDrop { border: 1px solid #ddd; border-radius: 3px; padding: ...

jqueryhtmlcss

The breakdown of an object literal in JavaScript

What is the reason that we cannot access the second item in the object literal the same way as the first? var foo = {a:"alpha",2:"beta"}; console.log(foo.a) -> printing 'alpha' correctly console.log(foo.2) -> Error: missing ) after argumen ...

javascripthtml

Can we limit the number of items to just two per row in a grid with two columns?

I'm currently facing issues with aligning items within a two-column grid. When looking at this image, you'll notice that the alignment is off. Specifically, 'Example 3' does not align properly with 'Example 4'. This seems to b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Adjusting the display property using the CSS plus symbol operator

I am currently in the process of designing a dropdown menu using CSS. The focus is on utilizing the following code snippet: #submenu_div { display: none; } #li_id:hover + #submenu_div { display: block; } UPDATE: Here is the corrected HTML structure ...

htmlcss

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...

htmlcssimageoverlay

Issue with Radio Button Value Submission in Angular 6 and Laravel 5.5

I developed a CRUD application utilizing Angular and Laravel 5.5. Within this application, I included three radio buttons, but encountered an error when trying to retrieve their values... A type error occurred indicating it was unable to read the data t ...

htmlangularlaraveltypescript

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

javascriptjqueryhtmlcss

"Modifying the height of an SVG <g> element: A step-by

Is there a way to adjust the height of a g element? Trying to set the height using {params} but it's not responding I made some changes in the comments because the svg is quite large (Scene.js) {/* Transformation */} <g transform="trans ...

javascriptcssreactjssvg

JavaScript form with radio buttons

I'm completely new to JavaScript and I'm attempting to create a basic script that will show one form when a radio button is checked, and another form when the second radio button is clicked (with no form displayed when neither is selected). I kno ...

javascripthtmlcss

AngularJS users are experiencing issues with the "See More" feature not functioning as expected

One of my tasks involves dealing with a block of text that needs to be truncated using ellipsis. To achieve this, I am utilizing jquery dotdotdot. For more information on dotdotdot, please refer to the documentation. I have created a straightforward dire ...

javascriptcssangularjsdotdotdot

Having trouble making the menu stay at the top of the page in IE7

Check out the demo here: http://jsfiddle.net/auMd5/ I'm looking to have the blue menu bar stay fixed to the top of the page as you scroll past it, and then return to its original position when scrolling back up. This functionality works in all brows ...

javascriptjquerycssinternet-explorerinternet-explorer-7

Error TS7053 occurs when an element is given an 'any' type because a 'string' expression is being used to index an 'Object' type

When attempting to post data directly using templateDrivenForm and retrieve data from Firebase, I encountered the following type error message. Here are the relevant parts of my code: // Posting data directly using submitButton from templateDrivenForm onC ...

javahtmlcssangulartypescript

Tips for designing a responsive element with a repeating border

Desired Design: Create a dotted border on top of each li-element Adjust the size of the dots and spacing between them using CSS or image/SVG manipulation Make the width of the ul responsive for varying border widths Ensure that dots are not partially dis ...

htmlcsssvgborder

What is the best way to trigger a javascript modal to open automatically after a specific duration

Let's take an instance where my modal has the ID #modal1. It usually appears through a button-based action. ...

javascripthtmltwitter-bootstrapbootstrap-modal

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Issue with jQuery animation: Background color does not change upon scrolling

Here is my fiddle link: https://jsfiddle.net/jzhang172/owkqmtcc/5/ I am attempting to change the background color of the "content" div when scrolling anywhere within it. The goal is for the background color to change when scrolling and revert back to its ...

javascriptjqueryhtmlcss

Creating a dynamic table using jQuery and XML content

Hello everyone, I am new to jQuery and JavaScript in general. My goal is to generate a table based on XML data, but I'm struggling to achieve the correct output. Here's what I have tried so far: Here is my HTML code: <table id="daily_fruit"& ...

javascriptjqueryhtmlxmlhtml-table

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

htmlcss

Partial element visibility while scrolling

My goal is to create a table with a fixed size that can be horizontally scrolled. I applied overflow-x: auto;, but only a part of the table is scrolling while the start of the table is off the screen. I am unable to provide the code, so I've added a s ...

htmlcss