css-position

Why do elements with the CSS position: fixed applied to them cause Firefox to eat 100% CPU when scrolling the page they are in? And are there any workarounds? I've noticed this behavior on a few sites, for example the notification bar at the top of the page on StackOverflow. I'm using Linux in case that matters. This is bug #201307 . It's a bug reported in bugzilla Apparently a work-around (with mixed reports of success..) is to disable smooth-scrolling Just disable smooth scrolling in Edit > Preferences > Advanced. As already stated, this is bug #201307 . The workaround is to disable smooth

I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it. main { display: grid; grid-template-columns: 20% 55% 25%; grid-template-rows: 55px 1fr; } nav { background: blue; grid-row: 1; grid-column: 1 / 4; } section { background: grey; grid-column: 1 / 2; grid-row: 2; position: sticky; top: 0; left: 0; } article { background: yellow; grid-column: 2 / 4; } article p { padding-bottom: 1500px; } <main> <nav></nav> <section>

I am trying to understand how z-index works. In order to do that, I have created a simple example which consists of five divs. Each one is a child of the previous, except for the first. My objective is to make the first div, the parent container of all other divs, be shown on top of all of the others, effectively hiding them. In order to achieve my goal, I have put z-index properties on all the divs and on the parent div I have put an exaggerated value of a 100 to make sure it is higher than all the others but it does not seem to be working. I have read many different documentations regarding

This question already has an answer here: Fixed position but relative to container 21 answers I am relatively new to CSS. I have run into a problem where I am trying to fix an element next to its parent element. I am able to do so with the following code: Parent element: #search_results{ position:relative; } Child element: .total { position: fixed; top:10px; width:250px; left: 75%; /*overflow: hidden;*/ margin-left: -125px; } This works fine until the browser window is resized. When that occurs, the fixed element overlaps its parent element. You can see my problem here: Twittiment I am trying

I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute. #navigation { display: block; width: 100%; height: 50px; position: fixed; left: 0px; bottom: 0px; text-align: center; z-index: 99000; } This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at the end of the tags, so, for example, on a long page, I'd have to scroll down just to see it. It is

I have two elements in the same container, the first has position: absolute , the second position: relative . Is there a way to set the "z-index" of an absolute element so that its in the background? The relative positioned element should be on the top (z-layer) because it holds links... Here is a JSFiddle: http://jsfiddle.net/8eLJz/ The absolute positioned element is on the top of the z-layer and I have no influence with the z-index -property. What can I do? I'm not sure which one you want in front, but you just need to set position on both and set z-index on both. http://jsfiddle.net/8eLJz/2