Skip to main content

Z-Index computed as auto even though it is set with a value on Chrome

This is a little known fact about z-index and usually missed.  If you read the article on w3schools then also you might miss this. It says:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

What this essentially mean that the element on which you are applying z-index, you need to have position attribute specified on it. Ideally use one of the above position values. If position attribute in the css style is not set z-index would be computed as auto. Google Chrome is quiet strict about this. Use a syntax like below.

img {
    position: relative;
    z-index: 100;
}

Thats the reason, why many times we don't see z-index working on out elements. 

Sources:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
https://code.google.com/p/chromium/issues/detail?id=39426





Popular posts from this blog

Why India Hasn’t Built Its GPT Moment (Yet)

India has the world’s third-largest startup ecosystem, a thriving developer base, and a mobile-first population larger than the US and Europe combined. Yet, no GPT-4. No DeepMind. No Amazon-style platform. Why? Innovation Isn’t Accidental—It’s Engineered The Zerodha Daily Brief recently asked why India hasn’t built a global product company like Apple. The key argument: India isn’t building for the world. It’s solving for local constraints, scale, and affordability—but global scale requires deep IP, design, and tech differentiation. It’s not just about software, it’s about systems thinking. More importantly, it answers the question: Why do countries innovate? The answer isn’t just genius or ambition—it’s incentives and ecosystems. The U.S. Defense Department, for example, accounted for nearly 70% of federal R&D funding during the Cold War. China has pumped billions into semiconductors and AI with long-term national alignment. These aren’t short-term bets—they are strategic, delibe...

From Stubborn to Smart: How I Learned to Use AI as a PM

Listen to the article in podcast format on PM-AI Diaries channel on Spotify! Ever since I published "The Death of the Stubborn PM" back in February, my inbox has been buzzing with one big question: “Okay, I get that AI is the future for product managers—but how do I actually use it?” It’s a fair ask. In that piece, I argued that PMs who resist AI are doomed to fade away, like dinosaurs refusing to evolve. As I wrote, “The stubborn PM who clings to old ways will die out, replaced by those who harness AI’s power while leaning into what makes us human.” Now, people want the playbook. So, let’s walk through it with a story—my own journey of figuring this out, backed by some sharp insights from MIT Sloan’s "When Humans and AI Work Best Together—and When Each Is Better Alone" . The Wake-Up Call Picture me a few months back: a PM buried in work, juggling a dozen tasks, and feeling like there weren’t enough hours in the day. Writing user stories, sketching ideas, track...

8 Product Management lessons from the movie 'Gold'

The movie 'Gold' starring Akshay Kumar, is an inspirational story of how passion, determination and persistence can help one achieve the Impossible. The character of Tapan Das, who was the Team Manager of Indian Hockey Team, is a fine example of an ideal Product Manager . Listing few of the core responsibilities/skillset of an ideal PM with examples from the movie (Spoiler Alert! ): Vision: The foremost responsibility of a PM is to set the vision for the team. During 1936 Olympics in Berlin, Tapan clearly set the vision for Gold medal as free India as a Goal and Vision. Hustle: As a PM, you need to hustle to get things done. Tapan, hustled to meet Mr Wadia to get things done over and over again through out the movie. Stakeholder Management: Aligning different stakeholders to your vision and progress is critical. Tapan did a brilliant job of doing that with Mr Wadia, Imtiaz, Samrat and other members of the team. Be it a royal blood like Raj Pratap Singh or a ...