CSS position: fixed
A fixed element is placed relative to the viewport, so it stays in the same spot even when the page is scrolled. Its final position is set with top, right, bottom, and left.
A fixed element does not leave a gap where it would normally have been.
Example
The fixed div sits in the lower-right corner and stays there as you scroll.
<style> block, give a div.fixed class position fixed, bottom 0, right 0, width 300px, and a 3px solid green border. Add a fixed div in the lower-right corner and enough page content to scroll, so the fixed element stays in place.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed</h2>
<p>Scroll the page. The fixed element stays in the lower-right corner.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<div class="fixed">This div has position: fixed.</div>
</body>
</html>
CSS position: absolute
An absolute element is placed relative to the nearest positioned ancestor (one with a position other than static). If there is no positioned ancestor, it uses the document body and moves with page scrolling.
Note: Absolute elements are removed from the normal flow and can overlap other elements.
Example
The absolute div is placed relative to its relative-positioned parent.
<style> block, make a div.relative parent with position relative, a width, height, and green border; and a div.absolute child with position absolute, top 80px, right 0, a smaller width and height, and a red border. Nest the absolute div inside the relative one so it is placed relative to the parent.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="relative">This div has position: relative.
<div class="absolute">This div has position: absolute, placed relative to the parent.</div>
</div>
</body>
</html>
Positioning Text On an Image
You can also use positioning to place text on top of an image, in spots such as the top left, top right, bottom left, bottom right, or center. PromptCookbook links to a full example for each position.