Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

QSticky z index - QInput outlined overlaps QSticky

See original GitHub issue

Describe the bug When scrolling past a QSticky, any outline added to a QInput has a higher z index. The content of the QInput does not overlap, just the outline.

Codepen/jsFiddle/Codesandbox (required) Codepen (https://codepen.io/bjbk/pen/mdJEbJe)

To Reproduce Steps to reproduce the behavior: Place a q-sticky and an element with some q-inputs having the outlined prop set. Scroll until the input passes beneath the QSticky. See z index behavior.

Expected behavior Expected the QSticky to have a higher z index than the outline.

Screenshots Screen Shot 2020-08-26 at 8 16 35 PM

Platform (please complete the following information): OS: macOS 10.15.6 Node: v14.4.0 NPM: 6.14.5 Yarn: 1.22.4 Electron: 9.2.0 Quasar: 1.13.1 quasar/app: 2.0.8 quasar/cli: 1.1.0

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

rstoenescucommented, Sep 9, 2020

Thank you for reporting. Fix will be available in Quasar v1.13.3.

0reactions

pdanpdancommented, Sep 10, 2020

I’ll check, but as far as I remember when I tried the same approach there are problems with standard focused and with the corners of outlined

Top Results From Across the Web

z-index - CSS-Tricks

Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative margin has pulled ...

Elements with position sticky on table cells overlaps and z ...

The sticky element that is next is always on top of the previous sticky element in HTML. Is there a way to change...

The stacking context - CSS: Cascading Style Sheets | MDN

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, ...

CSS z-index property - W3Schools

The z-index property specifies the stack order of an element. ... Note: If two positioned elements overlap without a z-index specified, the element ......

4 reasons your z-index isn't working (and how to fix it)

Z -index is a CSS property that allows you to position elements in layers on top of one another. It's super useful, and...