CSS: DIV-Box should always remain at the upper Browser Border
Question by Guest | 2015-09-30 at 11:02
I would like to realize a DIV container that always remains fixed on the top border of the browser.
It should not play any role whether you are scrolling up or down on the web page, the box should always stay at the upper site relatively to the browser and the box should not scroll with the page. The box should always be visible as navigation, even if you have scrolled the page down to the end.
If possible, this box should be placed covering the whole upper page from left to right and it should not only cover a part of the page.
I hope, I could explain what I want. Is this possible using pure CSS without any JavaScript?
Related Topics
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
jQuery: Show or hide DIV-Container depending on Checkbox State
Tutorial | 0 Comments
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
jQuery: Show a DIV - Hide other DIVs
Tutorial | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
Darken Background of a Website (Gray Out Effect)
Tutorial | 0 Comments
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Comment
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
This is possible with pure CSS without any problems.
Just try the following CSS:
With the following HTML:
With position:fixed it is possible to ensure that your element will be fixed and not scrolled with the page.
With left:0 and top:0 you are positioning the element at the upper left corner and using 100% and height:50px you are setting a width covering the whole page using a height of 50 pixels.
Last, you should select a high z-index value that must be higher than any other z-index of an element on your page ensuring that your DIV will always be at the top of all other elements.
2015-09-30 at 13:39