jQuery: Position from top of window
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>
I think you want
position: absolute;
instead of
position: relative;
position: absolute;
instead of
position: relative;
ASKER
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.
I cannot change anything about #xyz
I want to control the top position of $("#xyz h2" ) without making any changes to its parent.
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".
ASKER
OK, then how can I find out what negative number to use to get my element to 10px from the top of the window?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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>
Change
$(window).offset.top
to
$('#xyz h2').offset().top
$(window).offset.top
to
$('#xyz h2').offset().top
ASKER
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>
what about :
var topParent = $("#xyz").css("top").replace(/\D/g,"");
$('#xyz h2').css({ "top": (-topParent + 10 ) + "px" });ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Thanks for the points!
top: 100px;
left: 100px;
in your #xyz style