This question already has answers here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 4 months ago.
The hover state of the card component somehow interferes with the z-index ordering. See the following GIF for context:
Here are the classes of the two components:
(I had to simplify the structure in order not to overcomplicate this question. I'm happy to provide more details if needed.)
// Dropdown
<div className='relative h-full w-full' ref={node} onClick={handleMenuClick}>
{/* Menu button */}
{children} // here I render different elements based on where the Dropdown is placed
{/* Dropdown Content */}
// I removed some classes to show only the relevant ones
<div className=`right top ${isMenuOpen ? 'block' : 'hidden'} absolute z-30 rounded`}
onClick={(e) => e.stopPropagation()}>
... // Dropdown content
</div>
</div>
// Card element
<a className='bg-gray-darkest rounded-xl p-8 hover:brightness-75' // note: this is where I'm having issues
href={props.url}>
<img src='...' alt='...'/>
<div className='mt-6'>
<h4 className='font-display text-lg'>{props.name}</h4>
</div>
</a>
I tried to work around it by animating opacity vs brightness or using Tailwind's Groups to animate only some child components inside the card, but the effect is the same. Also removing the hover state and setting a static opacity or brightness value, breaks as well the order of the components.
Thanks for your support!
Thanks for the info provided, I was able to identify the issue. Although the Dropdown had a z-index of 30, the Sidebar (the dropdown parent component) had an implicit z-index of 0 that placed the whole sidebar on the same level as the rest of the page.
Not sure how the opacity impacts how the browser interprets the various layers when they have the same z-index, but the right approach was to increase the z-index of the Sidebar compared to the page.
Related
I'm trying to construct a fixed navbar, such that the background is blurred, buttons and images stay styled as they're styled, but the menu item text adjusts to properly contrast to the underlying color as the background scrolls.
I'm very very close, but can't seem to get it to work in a cross-browser kind of way (I really thought the days of this were mostly behind us :( ).
Here's what it looks like on Safari.
Navbar over light background:
Navbar over text on light background:
Navbar over text on dark background:
That's pretty much good enough (although I'd ultimately like the text in that last image to be white instead of brown/sepia). The problem is, all of that is in Safari, but when I look at it in Chrome or Firefox, I get
The amusing/frustrating thing about that is, I couldn't get it to work in Safari at all (you couldn't have both a filter and a mix-blend-mode), without applying this fix which was specified for Chrome!
The suggestion there is to "add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied" to deal with a bug in Chrome 90 (the answer is about 18 months old).
Here's a sample of what it looks like:
// backdrop-blur for the whole navbar
<header class="sticky backdrop-blur top-0 left-0 z-[1100] w-full">
<nav>
<ul class="flex justify-between ml-auto">
// a text element that uses mix-blend-difference to generate proper contrast
<li class="text-white bg-black mix-blend-difference
[backdrop-filter:opacity(1)]"> // <- this is the hack
Products
</li>
// a styled element that shouldn't change
<li>
<a class="bg-emerald-700 hover:bg-emerald-600 text-white py-2 px-4
rounded-sm shadow-lg shadow-emerald-800" href="/">
About
</a>
</li>
</ul>
</nav>
</header>
I'd put it in a fiddle, but I don't know how to get Tailwind support there, so you can play with it at Tailwind Play.
Further down in that same question is another answer from about a year ago, that suggest now you can't put the extraneous filter on the same element as the mix-blend-mode, and instead must but it on wrapper element around the blended element. Unfortunately, that not only doesn't fix it for Chrome, it also breaks it for Safari.
It appears that both CSS Filter Effects and CSS mix-blend-mode are theoretically pretty well supported, but either that's not true, or I'm doing something wrong.
Any ideas on how I can get this to work in a cross-browser compatible way?
I would like to have scrollable content within a bootstrap accordion, but can't get it to work.
Closest I have got was using flex-column and overflow-hidden on parents and overflow-auto on the content elements like this:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<main>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"
></script>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css"
rel="stylesheet"
/>
<div class="accordion vh-100 d-flex flex-column" id="accordionExample">
<div class="accordion-item overflow-hidden d-flex flex-column">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show overflow-auto" aria-labelledby="headingOne" data-mdb-parent="#accordionExample">
<div class="accordion-body overflow-auto">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
</div>
</div>
</div>
<div class="accordion-item overflow-hidden d-flex flex-column">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse overflow-auto" aria-labelledby="headingTwo" data-mdb-parent="#accordionExample">
<div class="accordion-body overflow-auto">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom CSS
or overriding our default variables. It's also worth noting that just about any
HTML can go within the <strong>.accordion-body</strong>, though the transition
does limit overflow.
</div>
</div>
</div>
</div>
</div>
</main>
<footer></footer>
</body>
</html>
But there because of the overflow-hidden on the accordion-item element, when you open a page on it, the other elements get shrunk.
This question already has an answer here:
Are flex items block level element?
(1 answer)
Closed last year.
I have the following content in a html file.
<body>
<img src="img/img1.svg" alt="" />
<hr />
<div class="flex-container">
<img src="img/img1.svg" alt="" />
</div>
</body>
.flex-container {
display: flex;
}
Basically, it's just a simple webpage with 2 identical images. The only difference is just that the first <img /> element is stand-alone, while the second one is nested inside a flex container.
By default, <img /> is inline element. When I open the chrome dev tool and inspect the 1st image, I get the following result:
However, when I inspect the second image, I find the display property of the img is changed to block:
I'm confused. I don't understand why and how the second image element is changed from inline to block. By looking into the Styles tab, I cannot see any changes to either of the 2 image elements, but the computed values for display property are different
From the specification:
CSS Flexible Box Layout Module Level 1
The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1ยง9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)
https://www.w3.org/TR/css-flexbox-1/#flex-items
and, as mentioned therein:
If a layout-internal box is blockified, its inner display type converts to flow so that it becomes a block container.
https://www.w3.org/TR/css-display/#blockify
Following on from this question I further evolved the demo messages example in an attempt to create page transitions between two pages with core-lists.
I'm trying to achieve the following:
hero transitions on the fabs on each page
slide transitions (in opposite directions) on the two pages
this to work as expected no matter where you are scrolled on the lists
Note the pages change when the fabs are clicked.
I've had some success but can't get it to work correctly in all aspects as can be seen from my jsbin.
I suspect part of the problem relates to sizing the divs that wrap the core-lists. I can't figure out how they to size these but I believe they are important to the transition effect.
Note also that the flexible padding on the sides of the lists is also important to preserve (similar to what exists on the real inbox)
First, there's no slide-from-left transition. You will need to remove everything related to it in your code.
I have found that the hero-transition doesn't work well with slide-from-right transition. A possible alternative would be, wrap those two paper-fabs in another core-animated-pages.
<core-animated-pages id="pages" selected="{{selected}}"
transitions="slide-from-right"
on-show-snooze="{{showSnooze}}" on-show-inbox="{{showInbox}}"
content
layout vertical flex>
<inbox-editor scrolltarget="{{$.panel.scroller}}" flex>
</inbox-editor>
<snooze-editor scrolltarget="{{$.panel.scroller}}" flex>
</snooze-editor>
</core-animated-pages>
</core-scroll-header-panel>
<core-animated-pages selected="{{selected}}" transitions="hero-transition" style="position:absolute; bottom:48px;">
<section>
<paper-fab class="fab-yellow" icon="add" hero hero-id="primary"
on-tap="{{showSnooze}}">
</paper-fab>
</section>
<section>
<paper-fab class="fab-red" icon="done" hero hero-id="primary"
on-tap="{{showInbox}}">
</paper-fab>
</section>
</core-animated-pages>
Please see this jsbin for reference. Notice that the paper-fabs move just like they are animated with a slide transition ('cause hero-transition animates the shape and position between elements, in this case, the animation transition should look identical to a slide one)! So maybe, you don't need to apply the hero-transition at all?
So i've been experimenting with z-index today, and i really do not understand what is happening here.
Here's a very simplified version of the HTML:
// content has z-index of 30, pos abs
<div class="content">
// content-centered has z-index of 32, pos rel
<div class="content-centered">
// Text and buttons goes here
</div>
</div>
// bubbles has z-index of 31, pos abs
<div class="bubbles">
<div class="bubbles-centered">
// Bubbles goes here
</div>
</div>
The goal is to have .content provide the background content, then the bubbles above the background, and at last the content above the bubbles. What is happening is for some reason the bubbles are above the content.
See demo: http://jsfiddle.net/zFFkv/1/
Give it a few seconds for the bubbles to appear over the content. You can't select the text or push the buttons, because the bubble-layer is above the content layer, even though it's set below. What's going on? Does child elements not inherit the parents index?
Any ideas?
z-indices are resolved relative to their parent, not the whole document.
.bubbles are above .content, and that's all that matters in your case. All the children inside .content will be below .bubbles, but can be ordered relative to each other.
To do what you're trying to do .content-centered and .bubbles will have to be siblings.
You can set pointer-events to none to on the bubbles element to prevent it from blocking the links below, although I don't think it has great support in IE.
.bubbles {
pointer-events: none;
}
Demo