MathCurvesSurfacesWallpaper GroupsGallerySoftwarePOV-Ray
ProgramingLinuxPerl PythonHTMLCSSJavaScriptPHPJavaEmacsUnicode ♥
Web Hosting by 1&1

CSS: Fix Element Position Relative to Window

Xah Lee, , …,

This page show you how to use CSS to fix a element's position relative to window.

Here is a example. You'll see a yellow box fixed to the lower right corner of your window.

♥ ♥ ♥

Here's the code:

<div style="
position:fixed;
right:1ex;
bottom:3ex;">
<p>♥ ♥ ♥</p>
</div>

The right:1ex means offset it from the right border of the window, by 1 “ex”. (ex means the height of the letter “x”.)

You can also use left:1ex and top:1ex to offset the position.

When you have 2 elements that are both position:fixed, they may overlap. You can control the overlap using “z-index”. See: CSS Example: “position:fixed”, overlap, z-index.

blog comments powered by Disqus