menu
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
CSS positioning is a technique used in CSS to place and arrange HTML elements in a particular position on a web page.
The different types of CSS positioning are static, relative, absolute, fixed, and sticky.
position:static is the default position of an element, where it appears in the normal flow of the page. position:relative allows you to move the element from its original position without affecting other elements on the page.
position:relative positions the element relative to its original position, while position:absolute positions the element relative to the nearest non-static ancestor.
positioning:fixed positions the element relative to the browser window, so it remains in the same position even when the user scrolls the page.
position:sticky is a type of positioning where the element behaves like it's relatively positioned until a certain scroll point, and then it becomes similar to position:fixed.
positioning:fixed positions the element relative to the browser window, so it remains in the same position even when the user scrolls the page.
The properties used in positioning are top, bottom, left, right, and z-index.
The directional properties specifies the distance between the directional edge of the positioned element and the top edge of its refrence point. This is from its original location for position:relative;, from its nonstatic parent for absolute.
The z-index property specifies the stack order of the positioned element, which determines which element appears in front of the other elements on the page. A higher z-index value means the element appears in front of elements with lower z-index values.
Copyright 2023