OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Positioning

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

Positioning

PREVIOUS NEXT

In this tutorial, I will be showing you the different property values that you can use to position your element in your webpage.

There are five (5) methods of positioning element in your HTML page: static, relative, absolute, fixed and sticky.
The position property is used to set position of the element in the web page.

Position Property Values

static - elements are positioned according to the normal flow of the web page. (It is not affected by the top, bottom, right, left & z-index properties).

TRY IT OUT YOURSELF

relative - elements are positioned relative to its normal position. Here the top, bottom, right, left & z-index properties can be used to adjust its position.

TRY IT OUT YOURSELF

absolute - elements are taken out of its normal flow and positioned relatived to the first parent element; whose positioning is not static. Here the top, bottom, right, left & z-index properties can be used to adjust its position.

TRY IT OUT YOURSELF

fixed - elements remain in the same point or place on the screen even when you scroll up and down, left and right. Here the top, bottom, right, left & z-index properties can be used to adjust its position.

TRY IT OUT YOURSELF

sticky - combination of both relative and fixed properties to make the element stick to the top of the web page - viewport, when you scroll through the page.

TRY IT OUT YOURSELF
note
NOTE:

The top, right, bottom or left property must be specified for the sticky value to work.

PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT