This sounds like a navbar or login form. Regardless, you can do this relatively simply (depending on your other style rules).
Here's a quick demo
<html>
<head>
<title>demo page</title>
<style type="text/css">
body {
padding-top: 10em;
background-color: #00FFFF;
}
#child {
position: absolute;
top: 1em;
left: 1em;
background-color: #FF00FF;
}
#parent {
background-color: #FFFF00;
/* position: relative; */
}
#content {
background-color: #FF0000;
padding: 1em;
/* position: relative; */
}
</style>
</head>
<body>
<div id="content">
Placeholder
<div id="parent">
Parent Div
<div id="child">
Child Div
</div>
</div>
</div>
</body>
</html>
The general idea is that you add some padding-top to the body (or the wrapper div, id="content" which contains all the info on the page). This gives you some room at the top of the page to work with and you can adjust the size of the padding to your needs.
Next you position the child element absolutely. Try moving it around by changing the top and left properties. (There are also right and bottom properties, you can set all four, just one or any combination depending on what you need)
Note that this only works because there are no positioned ancestors. If either the content or the parent div have positioning, then the child div will still be absolutely positioned, but it will be placed relative to it's nearest positioned ancestor. Play around the positioning for the content and parent divs to see what happens.
This is called positioning context. If parent has a position declaration, then that will be the positioning context for the child div. If parent does not, but content does, then content will be the positioning context, etc. If no ancestors are positioned, then the body element is the last ditch positioning context which the browser uses and that's what you want in this case. Just remember that means you can't use positioning on any of the ancestors of the element you want to move.
Show div at specific location.
