We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

jQuery: Position from top of window

hankknight
hankknight asked
on
Medium Priority
624 Views
Last Modified: 2012-05-11
How can I position my element from the top of the window instead of the top of its parent?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
position: relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
text-align: center;
}

#xyz h2 {
position: absolute;
background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>

<div id="xyz">

<h2>Hello</h1>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$('#xyz h2').css('top','10px');
alert('I want the h2 to be positioned 10px from the top of the window, not 10px from the top of its parent.'); 

/* ]]> */
</script>

</body>
</html>

Open in new window

Comment
Watch Question

Greg AlexanderLead Developer

Commented:
Take out the

top: 100px;
left: 100px;

in your #xyz style
I think you want

position: absolute;

instead of

position: relative;



Author

Commented:
Thanks, but I think you both misunderstood my question.  

I cannot change anything about #xyz

I want to control the top position of $("#xyz h2" ) without making any changes to its parent.
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
The "position:relative" declaration given to "#xyz" creates a new positioning context. If you can't remove that declaration, then you would need to give a negative value to the top property of "#xyz h2", e.g. "-90px".

Author

Commented:
OK, then how can I find out what negative number to use to get my element to 10px from the top of the window?
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
I tried using offset but I must be doing something wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
position: relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
text-align: center;
}

#xyz h2 {
position: absolute;
background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>

<div id="xyz">

<h2>Hello</h1>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$('#xyz h2').css('top', (0 - $(window).offset.top + 10) + 'px' );
alert( (0 - $(window).offset.top + 10) + 'px'); 

/* ]]> */
</script>

</body>
</html>

Open in new window

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
Change

$(window).offset.top

to

$('#xyz h2').offset().top

Author

Commented:
Thanks.  Now it positions the h2 slightly above the window.  I want it 10px below the top of the window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
position: relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
text-align: center;
}

#xyz h2 {
position: absolute;
background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>

<div id="xyz">

<h2>Hello</h1>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$('#xyz h2').css('top', (0 - $('#xyz h2').offset().top + 10) + 'px' );

/* ]]> */
</script>

</body>
</html>

Open in new window

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
what about :
var topParent = $("#xyz").css("top").replace(/\D/g,"");
	$('#xyz h2').css({ "top": (-topParent + 10 ) + "px" });

Open in new window

Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Thanks for the points!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.