CODEWITHSUNDEEP
htmlcss
Ethan Bacon
Ethan Bacon

Reputation: 47

How to make the div stay on the top of the view point on the page

I am trying to make my div stay on the top of the view point no matter how far down you scroll. This is my code so far:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>

I have looked up many things about this but none work. Help!

Upvotes: 1

Views: 4126

Answers (3)

Mavrick
Mavrick

Reputation: 505

add the following code in your program clear : both; top : 0px;

Upvotes: 0

yzn-pku
yzn-pku

Reputation: 1082

This works for me.

position: fixed;

Tip: when curious about how is xxx implemented in css, you can always examine the source code of websites that have already been using it.

Upvotes: 2

user142162
user142162

Reputation:

Change the position property to fixed:

position: fixed;

From the MDN:

position: fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Upvotes: 1

Related Questions