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

What is the rationale behind the preset margin on the <body> tag?

Throughout my years in development, I have primarily focused on front-end web UI development. One recurring issue that has always irked me is the constant need to reset default browser styling assumptions, which often slips my mind until it starts affectin ...

htmlcss

What is the best way to structure the layout: Subdomains or External CSS for Web and Mobile Web?

I'm currently working on designing an application that needs to be compatible with both web and mobile web browsers. Due to the differences in screen sizes, I understand that I will need to create different layouts and views to ensure optimal user exp ...

cssmobile-website

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

htmlcss

What is the best way to make the block rotate each time the button is clicked?

Specifically, I am having trouble getting the block to rotate properly. Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions. Any suggestions on how to achieve this? var now = 10; $('. ...

htmlcsssvg

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

htmlcssanchor

Discovering more about this topic

Looking for a way to create an expandable box that enlarges when "read more" is clicked, revealing text below it. And also looking to add a button that closes the expanded text back up. Experimented with the toggletext JavaScript command, as found on this ...

javascriptcsstextspry

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

What are the steps for utilizing CSS Global Variables?

Hey there, thank you for taking the time to help me out. I'm having a simple doubt that I just can't seem to figure out. So... here's my '/pages/_app.js' file: import '../public/styles/global.css'; export default funct ...

javascriptcssnext.js

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

I am a beginner in the world of JavaScript and I am currently attempting to incorporate the setInterval method within functions in Js. JavaScript Code: var tar = document.getElementById("sample"); function dataSample(tar) { //setInterval ...

javascripthtml

Maximizing AngularJs performance on handheld devices

Recently, I developed an HTML page using material angularjs that functions perfectly on desktops with various browser sizes. However, the issue arises when opening the same page on a mobile device as it behaves like a desktop application instead of adjust ...

htmlangularjsangularjs-materialresponsiveness

Having issues with Json stringification and serializing arrays

Having an issue with Json when using serializeArray. An example of my HTML form: <form action="" method="post" name="myForm"> ID: <input type="text" name="id" /><br/> State (XX): <input type="text" name="state" /><br/> <p ...

javascripthtmljsonserializationforms

When the React component's state is updated, an animation is triggered in a subcomponent connected to the parent component

The ProjectsSection component is responsible for rendering a document section with a header and cards. The goal is to trigger a header animation only when the header becomes visible on the screen for the first time and have it run once. However, adding a s ...

cssreactjs

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql

How to handle Component binding change events in AngularJS

I have developed a component in AngularJS that displays data. However, when the customer binding changes, I need to call a service in the component controller, but it is not updating. Below is the code snippet: In my Test1.html file: <tab-customer tit ...

javascripthtmlangularjs

Leveraging jQuery to extract the value from a concealed form field

Seeking assistance with a jQuery issue... I am attempting to use jQuery to retrieve the values of hidden fields in a form. The problem I am facing is that there are multiple forms displayed on the same page (result set items for updating), and the jQuery ...

javascriptjqueryhtml

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

I attempted to insert a PDF into my website using the <embed> tag. Unfortunately, it doesn't seem to be functioning properly in Internet Explorer when the Adobe Reader add-on is disabled. Is there a solution that will allow it to work even if th ...

javascriptjqueryhtmlcss

Calculation operations nested within each other

Looking for a solution here. I am trying to utilize the CSS calc operation to carry out two calculations: I aim to make my width equal to (100% / 7) - 2 But whenever I attempt multiple operations in a CSS calc function, it doesn't work: width: cal ...

cssexpressioncss-calc

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

cssstandards-compliance

Generate a hyperlink within a paragraph

Can anyone provide tips on how to turn a string from Json into a paragraph with a hyperlink included? <p>Dumy Dumy Dumy Dumy Dumy Dumy Dumy DumyDumyDumyDumy abc.com </p> Currently, the paragraph displays as is, but I would like to make abc.c ...

javascripthtmlangularjs

Solving regex issues within PHP

<div class="start">...</div> Is there a way to extract the content within <div class="start"> using PHP? I am looking for a regular expression solution that is capable of handling nested scenarios. ...

phphtmlregex