Search code examples
cssfixedelementscrollable

How to fix every element on the same position, when browser is resized?

Anyone tell me that how to fix all elements with css, means whatever we do with the browser's height and width then elements should not move? or elements should not move relative to the browser' height and width and page should also be scroll able?

Solution

  • Applying position: absolute to an element will cause it remain fixed relative to the document. That is, it will scroll with the document.

    Applying position: fixed will cause it to remain fixed relative to your browser window. That is, if you scroll the document it will not move.

    With each of these position values, you can specify some combination of top, right, bottom and left to specify their position. For example, the following style will fix an element very close to the top right of the browser window (it will not scroll with the document):

    .topright {
    position: fixed;
    top: 5px;
    right: 5px;
}