This is ignored: z-index: 10; ❌ Reason Element must have: position: relative | absolute | fixed | sticky
Category: CSS
CSS — contain Property Prevents Reflow Cascades
.card { contain: layout paint; } Why this is huge Stops layout recalculation spreading Massive UI performance win on large pages
position: sticky Stops Working Because of Parents
Sticky fails if any parent has: overflow: hidden; 🧠 Fix Remove overflow or move sticky element higher.
will-change Can Make Performance Worse
will-change: transform; ❌ Overuse causes: GPU memory pressure Slower rendering ✅ Rule Apply only shortly before animation, remove after.
overflow-x: hidden Is Not a Layout Fix
Using this hides bugs instead of fixing them. ✅ Proper Fix Identify overflowing element Fix width or flex behavior
100vh Breaks Mobile Layouts — Here’s Why
Mobile browsers resize viewport dynamically. ✅ Fix height: 100svh; or JS-calculated height.
CSS position: sticky Not Working? Here’s Why
Sticky fails when parent has: overflow: hidden; ✅ Fix Remove overflow or move sticky element higher in the DOM. Sticky only works inside scrollable ancestors.
CSS opacity Breaks Child Elements — Use RGBA Instead
❌ .card { opacity: 0.8; } This also fades text and icons. ✅ .card { background-color: rgba(0,0,0,0.8); } Why Opacity affects the entire element tree.
CSS 100vh Is Broken on Mobile (Real Fix)
height: 100vh breaks on mobile browsers. ✅ Correct Solution height: 100dvh; Or fallback: min-height: -webkit-fill-available; Why Mobile address bars change viewport height dynamically.
CSS “Text Overflow Ellipsis Not Working” — The Missing Combo
Most devs do only: text-overflow: ellipsis; But it requires three rules: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 💡 Add max-width too for perfect control.
HTML5 “Broken Autofill Styles” — Chrome’s Yellow Background Bug
Chrome applies weird autofill yellow color using a shadow DOM style. ✔ Fix input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } 💡 Works for: light themes dark themes password inputs
CSS “Z-Index Doesn’t Work!” — The Parent Stacking Context Curse
The REAL reason z-index fails: A parent has position + z-index→ it creates a new stacking context. ✔ Fix Remove z-index from parent OR apply a higher z-index to the parent itself. 💡 Debug Trick Apply: outline: 2px solid red; To visualize stacking contexts.
CSS “Absolute Element Misaligned” — The position: relative Curse
Absolute positioned child needs a positioned parent. ❌ Wrong .parent { } .child { position: absolute; top: 10px; } ✔ Correct .parent { position: relative; } .child { position: absolute; top: 10px; } 💡 Hidden Trap Transforms also create new positioning contexts.
CSS Grid “Overflow Bug” — When Your Layout Randomly Breaks
If a grid child is bigger than the track → grid collapses. ✔ Life-Saving Fix Add: min-width: 0; min-height: 0; ⚠ Why? CSS Grid defaults are NOT zero — they try to preserve content size.This breaks responsive layouts.
CSS Flexbox Gap Not Working? — The Hidden Flex Wrapping Trap
gap: only works when flex items wrap correctly. ❌ Wrong .container { display: flex; gap: 20px; flex-wrap: nowrap; } ✔ Correct .container { display: flex; flex-wrap: wrap; gap: 20px; } 💡 Hidden Detail Safari had partial support — updating fixes 90% layout bugs.
CSS Z-Index Hell — Why Elements Randomly Disappear (and the Real Fix)
Z-index doesn’t work the way most devs think.It depends on stacking contexts, not numbers. 🔥 The Real Causes position: relative creates a new stacking context transform creates a new stacking context opacity < 1 creates a new stacking context Parent stacking contexts override children You can set z-index: 999999 and STILL not see your element. […]
CSS Subgrid — The Most Misunderstood Layout Feature
Most devs don’t know that Grid can inherit layout from its parent grid. .child { display: grid; grid-template-columns: subgrid; } 🔥 Why It’s Huge Perfect alignment between parent & child Cleaner responsive layouts No duplicated breakpoints Layout consistency made easy
CSS Container Queries — The Future of Responsive Design
Media queries scale by viewport…Container queries scale by component. .card { container-type: inline-size; } @container (min-width: 450px) { .card { flex-direction: row; } } ✨ Why They’re a Big Deal 🎯 Component-level responsiveness 📦 No more giant breakpoint spaghetti 🧩 Perfect for design systems
How to display HTML components on the same line in CSS
Let’s say we have 3 buttons and we want to show them on the same line: #outer { width:100%; text-align: center; } .inner { display: inline-block; } <div id=”outer”> <div class=”inner”><button type=”submit” class=”msgBtn” onClick=”return false;” >Save</button></div> <div class=”inner”><button type=”submit” class=”msgBtn2″ onClick=”return false;”>Publish</button></div> <div class=”inner”><button class=”msgBtnBack”>Back</button></div> </div>
How to add some content to the right side of CardHeader on Bootstrap
<div class=”card-header container-fluid”> <div class=”col-md-10″><h3>Your Header Title</h3></div> <div class=”col-md-2 float-right”>The content you want to add to the right side.</div> </div>
How to align inconsistently sized logos with CSS
These 3 lines will save you (fit, line up, remove background): aspect-ratio: 3/2; object-fit: contain; mix-blend-mode:color-burn; Let’s see how you can use that: In the body section, we have a div with the “photoDiv” class. <div class=”photoDiv”> <img src=”1.png”> <img src=”2.png”> <img src=”3.png”> <img src=”4.png”> <img src=”5.png”> </div> And here is the magical CSS: <style> […]
How to disable mouse actions for a specific div with CSS
Let’s say you have a div with id “myDiv” <div id=”myDiv”> <input type=”text” value=”value” /> <br /> <textarea>value</textarea> </div> If you want to disable all the mouse actions in that div only then you can use this in your CSS file: #myDiv { pointer-events: none; }
How to apply two classes to a single element in CSS
Let’s say you want to use 2 or more classes for a div. Then you should use these classes inside the class attribute, separated by whitespace: <div class=”myFirstClass mySecondClass”></div> To target elements that contain all of the specified classes, use this CSS selector (no space) in your CSS file: .myFirstClass.mySecondClass {}
How to change the style of scrollbar with CSS
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } You can get more detail from here.
How to add scroll bar to div in Asp.Net
Let’s say we have div in view <div id=”myDiv” class=”div-with-scrollbar”> </div> With this CSS file, you can add a scrollbar .div-with-scrollbar { overflow-y: scroll; width: 100%; height: 500px; }
Hide element in CSS with Display and Visibility
visibility: hidden (Hide but keep the space) <div stlye=”visibility: hidden;”>The Components We want to Hide</div> By default, the value of the visibility property is visible. However, if you want to make an image invisible, you can set the value of visibility to hidden. display: none (Hide and remove the space) <div stlye=”display: none;”>The Components We want to Hide</div> The display […]
CSS Padding and Margin 4 Values and What happens if some of them are omitted
CSS Padding The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
How to override a CSS Property
The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon. In other words, it adds importance to […]
Imitating a blink tag with CSS3 animations
Chrome and Safari don’t support or even CSS’s text-decoration: blink;, but here is the solution for BLINK: <style type=”text/css”> .blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; } @keyframes blink { to { visibility: hidden; } } @-webkit-keyframes blink { to { visibility: hidden; } } </style> This is […]