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.

overwriting z-index in --production

See original GitHub issue

Hi, i hope this is the right place to submit an issue.

after running gulp --production sass ignores my z-index and sets whatever it wants leads to some UX problems.

Bug found while using following stack:

elixir
angular
angular material …

Issue Analytics

State:
Created 8 years ago
Comments:7

Top GitHub Comments

17reactions

harvzorcommented, Jan 28, 2016

Turns out this occurs if you use cssnano in the pipe.

Using cssnano as: .pipe(cssnano({ zindex: false }))

fixes the zindex changing.

http://cssnano.co/optimisations/#optimise-z-index-unsafe-

4reactions

OskHacommented, Jan 25, 2016

i will try to get more info. maybe its referencing to the elixir. but still this is very strange.

every time i set f.i. .some-class { z-index: 99 } after gulp in production i see z-index: 19 or 18. like sass was trying to calculate the indexes on its own.

Top Results From Across the Web

Managing CSS Z-Index In Large Projects - Smashing Magazine

Wrangling z-index values is a difficult task for many developers. Here is an easy-to-implement mini-framework based on existing conventions ...

issues with z-index and multiple !important rules

x-floating declaration being overwritten (crossed out), and the x-floating declaration being active. This goes against what I know of css specificity, and what ......

Z-index and stacking contexts - web.dev

In this module find out how to control the order in which things layer on top of each other, by using z-index and...

‍ How to solve the Z-index issue Within 1 minute - DEV ...

The z-index in html overrides the the natural order in the Dom. The primary method for getting things to show up should always...

The CSS z-index Property: What You Need to Know

In this example, we use z-index to override the default stacking. Now, the first written div (“first”) is at the top of the...