Scribd
Upload
4 views

Css Position Slides

The document discusses different CSS positioning properties like static, relative, absolute, fixed and sticky. It explains how positioning context is determined and how elements can be moved using top, bottom, left, right and z-index properties. These positioning properties allow elements to be positioned independently without affecting normal document flow.

Uploaded by

vefeje3792
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Css Position Slides

The document discusses different CSS positioning properties like static, relative, absolute, fixed and sticky. It explains how positioning context is determined and how elements can be moved using top, bottom, left, right and z-index properties. These positioning properties allow elements to be positioned independently without affecting normal document flow.

Uploaded by

vefeje3792
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Positioning

How to change the position of elements


1. for absolute value for position property the positioning context depends on 2 cases:
a. If there is no position property assigned to any parent element, then the positioning context will be the <html> element.
b. If the position property is applied to some of the parent elements, then the positioning context will be to the nearest parent with the position
property assigned.

2. When you apply overflow: hidden property to <body> element the property (overflow: hidden) gets applied to <html> element. This is the
default behavior in CSS. If you want to apply overflow: hidden to body somehow, you can define overflow: hidden (auto would also work) to
<html> and manually define overflow: hidden to <body> both.
Positioning Elements

<html>
<body> position:

<div> static Default


Document flow

absolute
<div>
relative

<div> fixed

sticky
Changing the Position

<html>
<body>
top
<div> <div>

viewport
left <div> right
<div>
< <html>

bottom <body>
<div>
<…>

Document Flow Positioning Context


Summary
The “position” Property The “Document Flow” Moving Elements
static (default) • The default positioning • top
fixed behaviour of html elements • bottom
absolute • Can be changed with • left
relative position • right
sticky • Elements can remain in the Z-Index
document flow or be
Positioning Context excluded from it
• Changes the default
• Defines the anchor point for element positioning along
Stacking Context
your position change the z-axis
• The viewport for fixed • Created when applying • auto (0) as default value
• Another element for fixed/ sticky or • Changes only possible
absolute absolute/ relative in when position is applied
• The element itself for combination with z-index • Larger value = element is
relative • Defines stacking behaviour positioned on top of other
• The viewport and another of child elements elements
element for sticky

NOTE 1: The top, bottom, left, right and z-index properties can only be applied if the element has position property other than static.
NOTE 2: For inline elements changing the width property has no impact.
NOTE 3: position property can be applied to block-level as well as inline elements.
NOTE 4: If there is a margin that is applied to the parent element then, along with position: fixed, we have to add top: 0 and left: 0 to
move it to the top (as in navigation bar).

You might also like