Why Is Overflow Interacting with Z-Index

Why is overflow interacting with z-index?

The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. overflow: visible simply means "paint this box even if it is overflowing its containing block" — the cell box is the containing block of the cyan box because its position is relative. Any other values of overflow cause overflowing content to be clipped from view. There is nothing special going on here; in particular, the z-index is completely irrelevant and there is no such interaction as the question title alludes to (and there really is no reason to set it to such a huge number unless you're worried about scripts injecting other elements into the cell).

The only way to allow the cyan box to appear while the cell has a non-visible overflow is to remove position: relative from the cell and apply that declaration to the parent of the cell (in your example, it's the body). Like this:

body {  position: relative;}
.boxy {  position: absolute;  z-index: 9999;  top: 70px;  width: 50px;  height: 50px;  background: #0FF;}
.cell {  border: 2px solid #F00;  overflow: auto;}

<div class="cell">  Here is some text to keep things interesting  <div class="boxy"></div></div>

Weird z-index behaviour preventing mouse interactions: bug or normal?

Ok, 10 seconds later I discover that using only positive z-index'es makes the problem go away. Perhaps negative z-index means the object is below the level that the mouse cursor notionally lives?

Interact with elements with lower z-index

The problem is setting z-index to -1 on your content. Instead of setting a negative value on the element in the background, set a higher value on elements that should be in front. You can add a z-index value to the sidebar and get the behavior you are looking for if you have position set to relative.

html, body {  height: 100%;  margin: 0;}.sidebar{  position: relative;  z-index: 1;  display: inline-block;  height: 100%;  width: 100px;  box-shadow: 3px 0px 100px 0px rgba(0, 0, 0, 0.16);  background-color: #fff;}.content {  position: absolute;  top: 0;  padding-left: 100px;  width: 100%;  height: 100%;  -moz-box-sizing: border-box;  box-sizing: border-box;  background-color: #EEF2F8;}.section {  display: block;  height: 100px;  background-color: #fff;}

<div class="sidebar">
</div>
<div class="content">  <div class="section">    <a href="#">You can interact with me :)</a>  </div></div>

z-index doesn't let me to interact with the behind content

You cant interact with it, you've put it behind everything. Try adding a positive z-index to your navbar instead.

Interacting with Divs Under Other Divs (Lower Z-Index Passthrough)

Fixed--many thanks to those in the comments who helped! Using pointer-events: none was indeed the fix, but the question was on which elements. ScrollMagic wraps all pinned elements in another div whose class it allows you to change: when pinning, use .setPin(element, { spacerClass: <the name of a class with pointer-events disabled> }), as per this example on ScrollMagic's website. Then, for each element in the pinned container that should still be interactive, add pointer-events: all to its style. There's likely a semantically better way to pin multiple elements without interaction issues, but this was the simplest fix I could find.

Why does negative z-index and non-static position disable my checkbox in most browsers?

The reason static works is because z-index is only applied to positioned elements - absolute, relative, fixed.

I believe in this instance, IE may have got the z-index right. The problem you are describing sounds like the checkbox is being placed behind the parent element in Chrome, FF, Safari and Opera.

The following text extract from W3.org descibes the order in which the z-index elements are drawn:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.

2. the child stacking contexts with negative stack levels (most negative first).

3. the in-flow, non-inline-level, non-positioned descendants.

4. the non-positioned floats.

5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

7. the child stacking contexts with positive stack levels (least positive first).

However, it sounds like Chrome, FF, Safari and Opera could be drawing the negative z-index elements (2) before the parent element's background (1).

In any case, as you can see, the negative z-index elements are pretty near the bottom of the pile, so if an element requires any kind of user interaction then a negative z-index is probably not the best choice.

Additional Note

Another reason it could be working in IE and not the others is that IE tends to treat "empty" elements as if they do not exist. So if there is something drawn above the checkbox but it contains nothing (no background, content etc) then IE will ignore it and allow interaction with the element below - where the other browsers will not.

CSS z-index property and javascript background mouse interaction

Instead of using e.target.getBoundingClientRect() and .left/.right which will change as the child elements are hovered, consider using the .offsetLeft/.offsetRight of the .card element itself.

let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
  let x = e.clientX - backgroundgradient.offsetLeft;
  let y = e.clientY - (backgroundgradient.offsetTop - window.pageYOffset);
  backgroundgradient.style.setProperty('--x', x + 'px');
  backgroundgradient.style.setProperty('--y', y + 'px');
}

.card,
.imagebox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.imagebox {
  flex: 3 1 30ch;
  height: calc(282px + 5vw);
  overflow: hidden;
}

.imagebox img {
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  padding: 15px;
  border-radius: 30px;
  z-index: 1;
}

.card {
  background: #bdbdbd;
  box-sizing: border-box;
  border: 2px solid #f93668;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.card:before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #f93668, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.8s ease, height 0.4s ease;
}

.card:hover:before {
  --size: 90rem;
}

.card-content {
  padding: 16px 32px;
  flex: 10 1 40ch;
  z-index: 2;
}

.card-tags {
  margin: 0 -8px;
}

.card-tag {
  display: inline-block;
  margin: 8px;
  font-size: 0.875em;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
}

.card-title {
  margin: 0;
  font-size: clamp(2.4em, 1.1vw, 1.1em);
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}

.card-title a {
  text-decoration: none;
  color: inherit;
}

.card-metadata {
  margin: 0;
}

.card-save {
  display: flex;
  align-items: center;
  padding: 6px 14px 6px 12px;
  border-radius: 4px;
  border: 2px solid currentColor;
  color: var(--primary);
  background: none;
  cursor: pointer;
  font-weight: bold;
}

.card-save svg {
  margin-right: 6px;
}

/* Body Layout */

* {
  box-sizing: border-box;
}

body {
  --primary: rgb(249, 54, 104);
  --grey: #454545;
  --lightgrey: #666;
  color: var(--grey);
  line-height: 1.55;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.container {
  width: clamp(20px, 90%, 90%);
  padding: 24px;
}

<div class="container">
  <article class="card">
    <div class="imagebox">
      <img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="Sample Image">
    </div>
    <div class="card-content">
      <p class="card-tags">
        <span class="card-tag">Gluten Free</span>
        <span class="card-tag">Main dish</span>
      </p>
      <h1 class="card-title"><a href="#">Title for a post to come</a></h1>

      <p class="card-desc">by Slutty Urbanism</p>

      <button class="card-save" type="button">
                Read more
            </button>

    </div>
  </article>

</div>

Having trouble with absolute positioning / Z-Index with Lists and Tables in IE 6 and 7

Using position: relative sets up a new z-index stacking context inside the relatively positioned element in IE.

Elements inside the relatively positioned element will be stacked according to their z-index, but when interacting with elements outside of the parent element, the z-index of the parent is used. This is why the popup shows below the multi-day event element (because even though there's no explicit z-index on the element, elements that come "later" in the document implicitly have a higher z-index than ones that come before)

To fix it, you can either

• Not use position-relative on the cell and position the popup relative to the entire document
• Give the container <div> a higher z-index than the one later on in the document.

I've found that changing the z-index programmatically with JavaScript to be best, since it minimizes weird interactions with the rest of the page (i.e. set the z-index higher when it is opened, and reset it back to default when it is closed)

Some blog posts that talk about this problem:

• http://annevankesteren.nl/2005/06/z-index
• http://verens.com/archives/2005/07/15/ie-z-index-bug/

---

Related Topics