00 Votes

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?

ReplyPositiveNegative
1Best Answer1 Vote

This is possible with pure CSS without any problems.

Just try the following CSS:

#immeroben{
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 999;
}

With the following HTML:

<div id="immeroben">INHALT</div>

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

ReplyPositive Negative
Reply

Related Topics

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.