Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
How do I position a div relative to a fixed position div?
Just add margin-top
or padding-top
the amount of height of the fixed element. I have used padding instead of margin, because the height increase on the div can be countered with border-box
.
Or if you choose to do it with margin, then use height: calc(100% - AmountOfHeader)
.
Also, there is no such thing as padding: auto
, it's either 0
or a positive value.
https://jsfiddle.net/8evLtbgr/
div.container { max-width: 100vw; height: 100%; margin: 0 auto; padding: 0; color: white;}
.site-header { width: 80%; text-align: right; position: fixed; right: 0; float: right; height: 100px;background-color: blue;}
.site-page { display: inline-block; float: right; width: 80%; height: 100%; padding-top: 100px; /* height of header */background-color: green;}
/***********/
body { height: 100vh; width: 100vw; margin: 0; } /*need this, because page is empty*/
*, ::before, ::after { box-sizing: border-box; /* padding and border won't increase size of the elements, namely .site-page */}
<div class="container">
<header class="site-header">site-header</header>
<div class="site-page">site-page</div>
</div>
position fixed div in absolute positioned div works - but why?
An element with position: fixed
is indeed positioned relative to the viewport (or browser). However, because it is an absolutely positioned element, it is "positioned relative to the initial containing block established by the viewport".
This is laid out in the position
documentation:
An absolutely positioned element is an element whose computed
position
value isabsolute
orfixed
. Thetop
,right
,bottom
, andleft
properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.
That is to say, when you specify margin-top
and margin-left
, these values are relative to the parent. And because the element is positioned relative to the parent, the default top
and left
are inherited from the parent. In your example, the .fixed
element has a top
value of 100px
because it inherits the top
value of 100px
from .sidebar
(the parent). When you set top: 0
on .fixed
, you are overriding this value (going from top: 108px
to top: 0
):
Because of this, the element appears to be taken 'out of flow'. However, it is still always positioned relative to the viewport; it just had an initial offset (which it inherited from its parent).
div after a div which position is fixed in css
When you have an element that is fixed (or absolute), there is no element after it. The fixed element is taken out of the document flow.
If you want two elements after each other at a fixed position, make a container that is fixed, and put the two elements inside it.
You can put another container with a top-margin around them, and set a top-margin on the second element. If the first element is empty, there is nothing to have a margin to, so the margin will collapse outside the container and the second element will be at the top of the container.
(The second container is needed because the margin will not collapse outside the fixed element.)
Demo: http://jsfiddle.net/Guffa/r5crS/
How do I position a div under a fixed position div
Something like this — http://codepen.io/sergdenisov/pen/pJyMGb:
HMTL:
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
<div class="menu-item">Demo</div>
<div class="menu-item">Contact</div>
</div>
<div class="menu-item menu-item_sub">Contact</div>
CSS:
body {
height: 2000px;
}
.menu {
position: fixed;
background: blue;
width: 100%;
}
.menu-item {
display: inline-block;
padding: 30px;
}
.menu-item_sub {
position: fixed;
left: 0;
top: 60px;
}
Align div with fixed position on the right side
With position fixed, you need to provide values to set where the div will be placed,
since it's a fixed position.
Something like....
.test
{
position:fixed;
left:100px;
top:150px;
}
Fixed - Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
More on position here.
Related Topics
How to Position Two Divs Horizontally Within Another Div
CSS Filter Invert Rule Breaking Fixed Position on Chrome 68
Change Div Order on Responsive Design
Less - Nesting Generates Bad CSS Code
Fixed Element in Transform Translate Container Not Working
HTML5 Video Background Color Not Matching Background Color of Website - in Some Browsers, Sometimes
Keeping Top Level Menu in Hover State When Moving Down to Sub Menus
Asp.Net Mvc: How to Use Razor Variable in CSS File
CSS "Height: [Percentage]" Behaviour Using "Margin" And/Or "Padding"
How to Avoid Content of Span Break in Two Lines
Possible to Create Random Numbers in Sass/Compass
CSS Apply Styling to All Elements Except Those in The Last Row
CSS3 Gradient with Transparency Not Displaying Correctly in Safari
Divs Appearing Different on Different Browsers
Calculate Sum Opacity from Layers
@Font-Face Doesn't Work in Firefox (But Exact Same Code Works on Another Site)