CSS: Fix Element to Window
This page show you how to use CSS to fix a element's position relative to window.
This is done by using
position:fixed
With offset like this:
top:20px;
right:20px;
When a element has position:fixed
, that element goes into its own layer. The normal flow of elements will flow as if that element doesn't exist.
Example
You'll see a yellow box fixed to the top right of the window.
I AM FIXED HERE
Here is the code:
<div id="fixed65146">I AM FIXED HERE</div>
#fixed65146 { position:fixed; top:20px; right:20px; font-size:2rem; color:red; background-color:yellow; border:solid thick red; }
Overlapping Elements
When you have 2 elements that are both position:fixed
, they may overlap. You can control the overlap using
z-index
.
[see CSS: z-index]
CSS Layout
- Display Property
- Pure CSS Table
- CSS: 3-Column Side-Panels Layout
- CSS: Newspaper Multi-Column Layout
- CSS: Text Flow Around Image
- Hide Element (visibility)
CSS Layers
- Position Property
- Fix Element to Window
- Position: Relative
- Absolute Position
Text Over Image- z-index