How can I place an element at the top of a page using CSS?


Tags: html,css

Problem :

Suppose I want to place a piece of text at the top of a page like this:

bar

How would I do this using only CSS?



Solution :

//same place when scrolling:
position:fixed;
//just stay at the top
position:absolute;

top: 5px;
left: 5px;

Note: for absolute, make sure it is not inside an element with position:relative; or just place it directly inside the BODY tag


    CSS Howto..

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

    How to put text on top of a pattern overlay CSS

    how to deal with suffix and prefix in css

    How to select by CSS styles in jQuery?

    How can I get a label to right align in a table “cell” (td)?

    Where and how to add/edit css in roots starter theme

    CSS triangle how to remove white space on the right

    How do I make two arrows in css

    How to make flashing text in Css? [duplicate]

    How to mail HTML/CSS output as attachment?

    Beginner: How to get a fixed element to a left position (float left?) - JSFiddle included

    How to transform to <%= link_to %> with css?

    In order to output in erb exactly what you have in your original html, you could use the following: <li> <%= link_to user_path do %> <span>User</span> <% end %> </li>...
    Read more

    how to load the dynamically changed css file

    CSS How to I align a header with a height of 2em to the bottom

    how I can set color of anything in css [closed]

    How to apply CSS properties of one class in another

    How to set DIV's width based on CSS indexes

    Responsive portrait images, Hows & Dont's?

    How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

    How to set CSS rules for input, except one type

    How to adjust CSS to make footer fixed height?

    How to make top/bottom borders appear ontop of left/right borders crossbrowser css

    How to change the text color of the clicked row of table with css and jquery

    How to use a divider in a navigation with list elements?

    How to change my Mercurial web interface aspect

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    How to let user change text font and colour in WordPress WSIWYG text editor

    How to make a menu centered using CSS

    How do I make a text tag as long as the div containing it?