css-position

i am using jquery mobile and for header/footer i am using data-position="fixed". However, when we scroll the page... the header footer goes away ands reappear when scrolling stops.. Is there a way we could just make it fixed on the screen an show all the time you are scrolling ? I can only think of a way is to apply position fixed and not use jquerymobile for these elements.. I tried my best to get this to work. If you want you can delete the function that changes the header and footer class from .ui-fixed-overlay to .ui-fixed-inline and remove the webkit animation from .fade.in and .fade.out,

I understand that any element with position: absolute will be positioned relative to the nearest ancestor with a positional attribute such as absolute or relative . This is mentioned in various answers for example here . Also on the w3schools site here ... An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However, inserting a static element appears to disrupt this rule and shifts the absolute element. I'd like to understand why that happens. See code snippet below. If the static element is

Background I have a small one-level CSS flyout menu (well, technically it's an expanding element). It is absolutely positioned at the bottom left of a parent absolutely-positioned element that is fairly narrow. See the second h1 element below: <div id="controls"> <h1>Controls 1</h1> <h1 id="size" class="poplinks button"> Size <a href="#" class="button selected" title="small"><img src=""></a> <a href="#" class="button" title="medium"><img src=""></a> <a href="#" class="button" title="large"><img src=""></a> </h1> </div> This is very simply turned into an expanding menu/flyout like so: .poplinks

I am making a small div on the center of the page which has a footer which is fixed but the div is scroll-able. According to me there are two ways to do it: Using position:fixed : Fixed position actually work relative to the browser window but I want position relative to my small div Using position:absolute : Using bottom:0; I solved the problem initially but the footer scroll with the div text. HTML : <div id="wrapper"> <div id="box"> <div id="header"> <h1>Heading</h1> </div> <div id="content"> Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text

I've got a situation where I've got 2 or more fixed position elements on a page displaying stacked one on top of the other (that is, the top of the second one is abutting the bottom of the first one - no z-index stacking of those elements). Inside the first fixed position element, there's an absolutely positioned element which is taller than its fixed parent, so it extends beyond the bottom of that fixed parent. The trouble is that the next fixed position element gets displayed on top of the absolutely positioned element. I've got a higher z-index value set on the absolutely positioned element

My website has a sidebar with lots of stuff in it—so much that the browser viewport must have a height of at least 1020 pixels in order to see it all without having to scroll (unless, of course, you zoom out). I'd like the sidebar's position to be fixed so that when you're on a page with lots of content, the sidebar stays in the same position as you scroll. This was very easy to implement: div#Sidebar { position: fixed; } This works well on my computer as long as the browser is maximized because my monitor is running at 1920 x 1200. But if I resize my browser window, the sidebar gets cut off.

As the title says, what are the differences between transform: translate(x, y) and position: relative. Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application? I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not animating it. So in the end, how are they both different and in what ways? Basically translate relies on

This question already has an answer here: body { overflow-x: hidden; } breaks position: sticky 3 answers I am trying to use bootstrap's sticky header. But when I added body {overflow-x: hidden; } it stopped working. Now I seen on different pages that position: sticky with it's parent having overflow set to something else as visible not showing up, is (or was) a common problem. But all of the posts were like 1 year old. Like this post: " Position Sticky with overflow-x set for parent div " Is there a solution by now? Since bootstrap 4 started using it, I would think that it's more supported