The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example.
I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/position and a few other articles, but I still don't get it.
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 an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.
The reason why I want to avoid going into details is because position: sticky is brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: sticky yet anyway (hopefully this will change within the next year).
Mozilla recently presented its implementation of position: sticky here. It's highly worth a watch.
See this self-explanatory example for better clarity. CODEPEN
Fixed Position:
An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.
It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).
If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).
Sticky Position:
An element with sticky position is positioned based on the user's scroll position. As #Boltclock mentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.
It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).
If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.
So if you want to achieve the fixed functionality but inside a container, use sticky.
Let me make it extremely simple.
fixed position will not occupy any space in the body, so the next element(eg: an image) will be behind the fixed element.
sticky position occupies the space, so the next element will not be hidden behind it.
Following image is fixed some part of image is hidden behind navbar, because Fixed element doesn't occupy space. You can solve this by adding margin or before/ after pseudo classes
This eg is of sticky position. Here Image is fully shown, nothing is hidden behind navbar because sticky elements occupy space in the document.
Suppose you have a navigation bar at the top of your website and you want it to be fixed so that as you scroll down the page, it's always visible.
If you give it position: fixed; then the page content at the top will be hidden below the navigation bar. In contrast, if you decide to give it position: sticky; top: 0;, the navigation bar will remain in the flow of the document, and gracefully pushes the content underneath it below, so no content is hidden.
When you apply position: fixed; the navigation bar escapes from the normal document flow, similarly to when you float an element.
fixed get fixed on both X and Y axis while sticky is fixed on X axis only.
sticky will be fixed only till the end of the container, but fixed will be fixed until the end of the webpage.
Fixed and Sticky both are very similar but there is one important difference between them -
1. position:fixed : It will directly fixed the element at provided location using top,bottom,left,right.
<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>
- here paragraph with fixed position will fixed always at top:0px.
2. position:sticky : It will not directly fixed the element at provided location. It will move element with scroll initially. It will fixed the element only if element reached to specified location using top,bottom,left,right. Until it will move with scroll.
<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>
- here paragraph with sticky position will fixed or stick only if element will reached to top 0px position.
Related
I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.
I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.
Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?
Any help is appreciated.
Thanks in advance!
If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.
The fixed header seems to have a natural height of nearly 20px.
So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.
Try adding this to your CSS:
div.list { margin-top: 20px;}
This will push the div containing all the list items 20px from the top.
DEMO: http://codepen.io/anon/pen/EVWYJd
UPDATE
The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.
This issue has been addressed in these posts:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Creating a variable height "fixed" header in CSS with scrollable content
I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).
I've tried dozen of examples to get my footer to stick to the bottom of the page.
When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.
I have no idea how to fix this.
(Some tips for my code is also greatly appreciated!)
HTML
http://pastebin.com/ksgJSUpz
CSS
http://pastebin.com/i9nPtYkU
Thanks!
The problem is that you've been using position:absolute throughout your code. Absolute positioning breaks the flow of the document.
If you use relative positioning or if you don't define positioning at all (static position) the elements will run the one after the other. With your code you have to calculate the height of each element end start the next one where the previous ends by hand. This happens because absolute positioned elements don't push other element down. They are as if they have no height. For example you have your header height at 100px; and then you start your info with absolute positioning and top 100px;
Your footer will go and sit at the absolute position that you will tell him to. Problem is that you don't know what that position is since you have an element with variable height. If you put `bottom:0;' with absolute positioning the header will just go and sit at the bottom of its parent. Its parent in your case is the wrapper which has no specific height defined. So the #wrapper gets the height of its contents but since its contents are all absolute positioned inside it and as I said that breaks the flow it doesn't get any height from them. Instead the #wrapper gets the height of the window and not the whole document.
Best thing to do is redesign your page without absolute positioning.
Some quick fixes would be to give your wrapper a specific height like height: 1200px;
That will force your footer to go and sit at the bottom of those 1200 pixels
Example with height at wrapper
Another solution would be to use fixed positioning for your footer. That would make the footer stick at the bottom of the window even while it scrolls.
Example with fixed positioning
But really what you should do is redesign the page from the start and to avoid absolute positioning where its not needed.
I am working on a website which has two containers: sidebar and the main content.
The problem is that when minimizing the window (only) the left sidebar fits the size of the current size of the screen and when scrolling down the sidebar disappears.. This only happens when the content container (on the right) doesn't fill the screen..
You can try and minimize this page you'll see that the left side bar disappears when scrolling down when window is minimized.
You can try a good page with more content, you'll see that all is fine here..
I tried height="100%" and width="100%"
OK Figured it out
I had to add:
min-height: 100%;
to the body
and use
bottom: 0;
on the sidebar
Thanks for your help :)
The main issue is that the wrapper and sidebar elements in your body are absolutely positioned - therefore the body does not know how to expand to the size of the content of the page itself, as absolutely positioned elements are taken out of the flow of the document. In this case, you have taken all the content of the page out of the document flow.
Therefore, setting a height, or min-height, to the body element will not work, as it will only take on the height of the viewport and nothing else. The children container, being absolutely positioned, will then also take on the height of the viewport.
Scrolling is still possible on the merit that content is overflowing from either one of the absolutely positioned children.
You can try setting height: auto on the sidebar element. Alternatively, you should float your wrapper and sidebar (and take out absolute positioning) - that will at least place the content back into the document flow, allowing the browser to compute the actual 100% height :)
Absolutely positioning is a little bit of a tricky issue, I have to admit.
I'm guessing the containers are divs?
The width should be 100% as you have it there, but for the height, try: line-height:100%.
I was trying to absolutely position an element at the bottom of the page (not the viewport). The element is a direct child of the BODY. You can imagine the page to have lots of content so that there is a scrollbar.
So something like this:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
This put the image at the bottom of the viewport over the existing content. However, once I added the following css rule:
body{
position:relative;
}
The image went to the bottom of the page.
So if BODY is not the containing block of all elements, what is ?
Also, I am sure this is a solved problem but I couldn't find an example with detailed explanation of the problem and the solution. Any pointers?
It could be <html>?
Set position: relative on that and see what happens.
Update - Straight from quirksmode
The containing block
In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?
position: static: No reference point, since a static block cannot be moved.
position: relative: The position the block would take if it were not moved (i.e. if it had position: static).
position: absolute: The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.) <--- Bingo
position: fixed: The viewport (browser window).
Ok lets suppose you have the following:
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
<div style="margin-bottom: 50px">Content here</div>
</body>
This should solve the problem. Obviously set the bottom margin to the height of the image. Otherwise you could try setting the bottom margin of the body tag to the height of the image, then set the bottom setting for the image to -{height of the image}. This should achieve the same effect as above though.
PS In case you didnt realise, margin-bottom is the amount of space that appears below an element. If you want a coloured background for the body and you want this to take effect around the footer (like, say, if your footer is only 80% of the screen and centred, leaving 10% at either end) then you could always try padding-bottom: 50px.
Sounds like natural behaviour to me. You said the page would have lots of content and you would have a scrollbar. Having an element with position: absolute it would calculate it's position based on the nearest parent with position relative.
If the page is so high that you would have a scrollbar, the body element would stretch to the bottom of the page. Your image (position: absolute) is a child of body(position: relative), so I don't see the problem.
I also don't really understand your question:
I was trying to absolutely position an
element at the bottom of the page (not
the viewport).
This put the image at the bottom of
the viewport over the existing
content. However, once I added the
following css rule:
body{ position:relative; }
The image went to the bottom of the page.
Isn't the problem solved now? Do you want the image at the very bottom? (when you scroll down you can see it) or do you want it just above the fold?
Maybe this is a bit silly, but i think there is the above the body. I use resets, and in some of the large ones is always a line like this:
body, html { 'css properties bladiebla' }.
So to me that suggests that html is the container for body, sounds pretty logical to me ;) (but i can't find any references or proof of it myself a.t.m.)
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).