I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content...

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV. #f...

I'm not sure if I fully understand the difference between these two. Can someone explain why I would use one over the other and how they differ?

I have 2 divs with position:absolute inside a container with position:relative. I am trying to display the first div .box1 while hiding the second div, .box2, using absolute positioning. I can se...

I am developing website against latest Bootstrap version 3.3.2. My task is to create navigation, that is positioned on top of other content (simple roll over menu on hover). For this menu I want to...

Say we have a fixed sidebar, this: .sidebar { position: fixed; top: 0; left: 0; min-width: 17em; height: 100%; } When the Safari bottom bar is visible it's ok, but when scrolling down it disa...

I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, bu...

I was stuck on this for a little bit and thought I'd share this position: sticky + flexbox gotcha: My sticky div was working fine until I switched my view to a flex box container, and suddenly the...

I'm guessing these two attributes don't actually work together, but my situation: I'm trying to create a tooltip component. My tooltip is positioned absolutely, and as I don't know what the length...

I have an element that I am making sticky with position sticky: #header { position: sticky; width: 100vw; top: 0; } <app-header id="header"></app-header> And that works fine, bu...

I have a container with known height (height is sometimes longer then screen). This container has a vertically and horizontally centered element (via flex). I was hoping to keep this element alwa...

I have an absolutely positioned block of text inside a relatively positioned container. The absolutely positioned element exceeds the right boundary of its container. The problem is: the text isn'...

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrolls down with the user. In Firefox it works fine, but in webkit based...

I am reading a guide from this site about a technique on centering elements. I read the CSS code, .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } ...

When we apply position:fixed to an element, it's taken out of the normal flow of the document, therefore it doesn't respect it's parent's element width. Are there ways to make it inherit it's paren...

i have a fixed header with 100% width. #header { background: #2e2e2e; width: 100%; z-index: 999; position: fixed; } browsers scrollbar is under my fixed div. How to fix that?

I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and w...

Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute; Would there by anything wrong, or should I sa...

My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath them when you scroll. Eve...

How can I prevent div from expanding? I want div with elements not to take 100% of available space and have width that it's children have. I need this for centering parent div horizontally. The tri...

In the following snippet, there is a sticky div positioned inside a container. It sticks to the top of the scrolling panel while staying inside its container all the time. This is the same behavior...

I am having some trouble with a 'fixed' element in Google Chrome. The element behaves as it should in other major browsers. Here is the CSS: #element { position: fixed; bottom: 0px; width: ...

I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bott...

I have a web page in which I am using an SVG clip path applied to one of the page's HTML elements. SVG element: <svg height="0" width="0"> <defs> <clipPath id="clip"> <pa...

I just can’t get a sticky table header inside an overflow-x: auto div to work. The goal is to have a table with many columns that is contained within the div (100% div) yet be able to scroll the ov...