css-position - w3toppers.com

object-fit, object-positioning and absolute positioning

The image is a replaced element so the use of top/left/right/bottom will not work like it will do with a non-replaced element (a simple div for example). Here is the relevant parts from the specification: https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height To make it easier the computed height/width of your image aren’t defined by the top/bottom and right/left values … Read more

body { overflow-x: hidden; } breaks position: sticky

Setting the overflow-x property to value clip helped me achieve position sticky and prevent scrolling. Here is more explanation in this article

Absolute positioning ignoring padding of parent

First, let’s see why this is happening. The reason is that, surprisingly, when a box has position: absolute its containing box is the parent’s padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent’s content box. Here … Read more

Position fixed doesn’t work when using -webkit-transform

The CSS Transforms spec explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.

Targeting position:sticky elements that are currently in a ‘stuck’ state

There is currently no selector that is being proposed for elements that are currently ‘stuck’. The Postioned Layout module where position: sticky is defined does not mention any such selector either. Feature requests for CSS can be posted to the www-style mailing list. I believe a :stuck pseudo-class makes more sense than a ::stuck pseudo-element, … Read more

Why doesn’t width/height work with non positioned pseudo elements?

First, it’s not about percentage values. You will have the same result even with pixel values and both width and height aren’t working. Pseudo elements are inline elements and their width/height is only defined by their content and the width/height set with CSS will be ignored. In CSS, ::before creates a pseudo-element that is the … Read more

How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

This can now be done without JS, just pure CSS. So, anyone trying to do this for modern browsers should look into using position: sticky instead. Currently, both Edge and Chrome have a bug where position: sticky doesn’t work on thead or tr elements, however it’s possible to use it on th elements, so all … Read more

WPF WebBrowser Control – position:fixed Element jumps while scrolling (Windows 8)

If there are discrepancies in behavior of the same web page loaded into WebBrowser control and standalone IE browser, the problem can often be fixed by implementing WebBrowser Feature Control. Once the feature control has been implemented, it makes sense to verify that <!DOCTYPE html> is observed by WebBrowser and the page is actually rendered … Read more

CSS: display:inline-block and positioning:absolute

When you use position:absolute;, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there’s nothing else to set the height, then the container will be zero height. Additionally, setting display:inline-block; … Read more

Why isn’t my margin working with position: fixed?

When you set an element to position: fixed;, you remove it from the “normal document flow”. Imagine your website is a river, and you’re looking down at it from above. Each element is a rock in that river. Any margin you’ve applied to your elements is like a force field around one of those rocks. … Read more