4.1 absolute positioning
Absolute positioning in CSS lets you have precise control over where elements sit on your web page. When you use absolute positioning, the element is removed from the normal document flow and is placed relative to its closest positioned ancestor. If there ain't one, it's gonna be positioned relative to the initial container (usually <html> or <body>).
Main features of absolute positioning:
- Out of document flow: absolutely positioned elements don't affect other elements and aren't considered when calculating parent elements' sizes.
-
Relative positioning: elements are placed based on their nearest ancestor with relative (
position: relative), absolute (position: absolute), fixed (position: fixed), or sticky (position: sticky) positioning. -
Using coordinates:
top,right,bottom, andleftproperties are used to set the exact position of an element.
Example of basic absolute positioning
Let's check out a simple example of positioning an element absolutely:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
In this example, the .box element is positioned relative to its parent container, .container, which has position: relative;.
4.2 Creating Overlays
Absolute positioning is often used to create overlays like modals, tooltips, and lightboxes.
Example of absolute positioning:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 Precise Layouts and UI Components
Absolute positioning is great for crafting precise layouts, like controls in media players, custom UI components, and toolbars.
Example of absolute positioning:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Creating Complex Layouts
Absolute positioning allows you to create complex layouts, like dashboards and interactive elements.
Example of absolute positioning:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION