/    Sign up×
Community /Pin to ProfileBookmark

How to define style.top?

Copy linkTweet thisAlerts:
Feb 14.2008

<div id=”p” onscroll=”test()” style=”width:150px; height:150px; overflow:auto;”>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <input id=”c” value=”Test” type=”button”/>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>

….

What is the document.getElementById(“c”).style.top?

1)It is the distance from the upper edge of the button to the top edge of the document or

2)It is the distance from the upper edge of the button to the top edge of the parent element (id=”p”) or

something else?

3)How should I code it to do the following:

While the div (id=”p”) scrollTop, the button(id=”c”) will stay at the same position (not scrolling along).

Thanks

Scott

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienFeb 15.2008 — The [B]top[/B] style all depends on what kind of positioning you give the element, and if any parent elements are positioned.

[B]position: relative;[/B]

top, left, right, bottom are all taken in reference to where the element actually exists in the document flow. Those positions are literally "relative" to where the element takes up space on the page.

[B]position: absolute;[/B]

The element is removed from the document flow, and creates its own document flow. It is positioned first by any relative or absolute positioned parents, then by the body element. Any descendant elements will be positioned according to this absolute positioned element.

[B]position: fixed;[/B]

Works the same as absolute positioning, except that the element is anchored to the exact X-Y coordinates on screen, and stays in view now matter how you scroll.

[B]Quick CSS Positioning Explanation[/B]
×

Success!

Help @scottjsn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...