CODEWITHSUNDEEP
jqueryhtmlcss
John Doe
John Doe

Reputation: 3671

How can I have a div element anywhere over other elements on a page?

How can I position a div anywhere on a page? I'm trying to treat it as a popup box. Below is what happens when I use the following code:

<div style="width: 100px;padding: 5px; background-color: #CCCCCC;top: 73px; left: 0px">TEST</div>

Upvotes: 1

Views: 7484

Answers (5)

Nathan Bell
Nathan Bell

Reputation: 2362

position: absolute; will not work as you expect when the user has scrolled down on the page. You'll want to also look at position:fixed, which will position an element relative to the "viewport" (the browser window, no matter where the user has scrolled).

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68922

You need to know more about CSS Positioning.

In your case you can use either position:absolute; or position:fixed; based on your needs.

Upvotes: 0

kba
kba

Reputation: 19466

You need to apply position: absolute to your div element's CSS.

Upvotes: 0

Ibu
Ibu

Reputation: 43820

giv the body an position: relative and the div a position: absolute

This way the div will can be positioned anywhere relative to the body, using top and left properties.

In cases like these it makes more sense to use the css in the head or external file.

Upvotes: 0

neeebzz
neeebzz

Reputation: 11538

Use absolute positioning: 

style="position:absolute; top:10px; left:10px"

the top and left are the x,y coordinates of the top left edge of your div.

Upvotes: 7

Related Questions