Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior. I created a Chrome bug for this https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Please star it so this can get some attention.
As example (DEMO): HTML: <div class=”header”> <img src=”https://stackoverflow.com/questions/11701311/img/logo.png” alt=”logo” /> <h1>My website name</h1> </div> CSS: .header img { float: left; width: 100px; height: 100px; background: #555; } .header h1 { position: relative; top: 18px; left: 10px; } DEMO
Position Fixed Element Horizontally Based Off Another Element (Disclaimer Note: The solution offered here is not technically “absolute horizontally” as the question title stated, but did achieve what the OP originally wanted, the fixed position element to be ‘X’ distance from the right edge of another but fixed in its vertical scroll.) I love these … Read more
position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container. Without going into specific details, position: sticky basically acts like position: relative until … Read more
— Shameless plug — I have added this function to a library I created vanillajs-browser-helpers: https://github.com/Tokimon/vanillajs-browser-helpers/blob/master/inView.js ——————————- Intersection Observer In modern browsers you can use the IntersectionObserver which detects where an element is on the screen or compared to a parent. The Intersection Observer API provides a way to asynchronously observe changes in the intersection … Read more
Demo with IntersectionObserver (use a trick): // get the sticky element const stickyElm = document.querySelector(‘header’) const observer = new IntersectionObserver( ([e]) => e.target.classList.toggle(‘isSticky’, e.intersectionRatio < 1), {threshold: [1]} ); observer.observe(stickyElm) body{ height: 200vh; font:20px Arial; } section{ background: lightblue; padding: 2em 1em; } header{ position: sticky; top: -1px; /* ➜ the trick */ padding: 1em; … Read more
EDIT : this answer used to claim that it isn’t possible to center an absolutely positioned element with margin: auto;, but this simply isn’t true. Because this is the most up-voted and accepted answer, I guessed I’d just change it to be correct. When you apply the following CSS to an element position: absolute; top: … Read more
I don’t believe there’s a way to query the mouse position, but you can use a mousemove handler that just stores the information away, so you can query the stored information. jQuery(function($) { var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); // ELSEWHERE, your code … Read more
This is because according to CSS 2.1, the effect of position: relative on table elements is undefined. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of … Read more
You can use the following code to add column to Datatable at postion 0: DataColumn Col = datatable.Columns.Add(“Column Name”, System.Type.GetType(“System.Boolean”)); Col.SetOrdinal(0);// to put the column in position 0;