I would like to have the "Recent Activity" div fixed within the "Recent-Activity-Grid" div, so that when you scroll through the overflown information "Recent Activity" stays in the same spot. How would I do that? http://jsfiddle.net/aJHnV/3/
I am not sure how can you prevent "Recent Activity" div from scrolling as long as it is in the same div as the overflow content. I had put the overflow content into a new div, and have that div scroll itself to make it work:
http://jsfiddle.net/aJHnV/12/
And as the other answer said position:fixed won't work because it is relative to the Viewport.
A fixed position element is positioned relative to the viewport, or the browser window itself. So, you can't do this using only css.
have a fixed position: i.e
.fixedGrid
{
position: fixed;
}
Tell me if that worked. I have implemented this technique on my website. :)
Related
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
I have a div element which is header and is fixed. I want it to remain at top of my website while other contents move below it while scrolling.
Below this header is a div element containing two div elements, one is floated left while other right.
Now when i scroll down my webpage left floated div element moves below the header as it should. However the other div element is moving over the header. I tried using z-index but it's not working. Please help.
Please add the sample code to understand the problem.
Try adding z-index to the parent. Something like this
.fixed{
z-index:1;
}
.float-parent{
z-index:0;
}
So I have a div with display:flex and position:relative.
I'd like to have an overlay element on the bottom of this div so I put position:absolute on it. If its height would be auto that would be the best but not must have. The problem is if I scroll the parent relative div then the absolute positioned goes with it. How could I pin it to the bottom?
Code
I'd like a pure css solution.
Update1:
A working solution: http://codepen.io/apreg/pen/gwBdJq
If I got what you want, you always want to have arrows on the screen. But that's fixed position then, like this:
http://codepen.io/anon/pen/mAzjWE
.actionRow {
position: fixed;
bottom:120px;
}
I need the border of the title of this page to extend to the right side.
Perhaps there is a better way of doing this but I have used position:absolute and width:100% because the content div underneath needs to overlap.
This causes a horizontal scrollbar to appear. How can I get rid of that?
problem site
Because of your absolute, adding a 100% to the element will extend it the size of the viewport from where it starts.
I believe what you're wanting to do can be accomplished by keeping the absolute there, but also adding a relative positioning to your #content rule:
#content {
position: relative;
}
I found how to fix div position using jQuery.
Here is an example.
Can I achieve same effect using css?
UPD: I have seen this solution. I want also horizontal window scrollbar to appear, if fixed element does not fit the window.
You can achieve the same effect without the cool whizz-bangs and animations with position: fixed. The fixed element will then just scroll along.
As for horizontal scrollbar when content doesn't fit the window, just define width: 100% and overflow-x: scroll for the fixed element .