{"id":106,"date":"2026-04-07T01:30:37","date_gmt":"2026-04-07T01:30:37","guid":{"rendered":"https:\/\/gigz.pk\/css\/?post_type=lesson&p=106"},"modified":"2026-04-07T01:30:37","modified_gmt":"2026-04-07T01:30:37","slug":"106","status":"publish","type":"lesson","link":"https:\/\/gigz.pk\/css\/lesson\/106\/","title":{"rendered":""},"content":{"rendered":"\n

CSS Position Training Content<\/h1>\n\n\n\n

What is CSS Position<\/h2>\n\n\n\n

CSS position is used to control how elements are placed on a web page. It helps you move elements and manage layout more precisely.<\/p>\n\n\n\n

There are four main types of position values. These are static, relative, absolute, and fixed.<\/p>\n\n\n\n

Static Position<\/h2>\n\n\n\n

Static is the default position for all elements. When an element is set to static, it follows the normal flow of the page. You cannot move it using top, bottom, left, or right properties.<\/p>\n\n\n\n

Example<\/p>\n\n\n\n

div {
  position: static;
}<\/pre>\n\n\n\n
Use static when you want elements to appear in their natural order without any special positioning.<\/p>\n\n\n\n
Relative Position<\/h2>\n\n\n\n
Relative position allows you to move an element from its original position. The space it originally occupied remains the same.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
div {
  position: relative;
  top: 10px;
  left: 20px;
}<\/pre>\n\n\n\n
This means the element will move slightly from where it normally appears.<\/p>\n\n\n\n
Use relative when you want small adjustments without affecting other elements.<\/p>\n\n\n\n
Absolute Position<\/h2>\n\n\n\n
Absolute position removes the element from the normal flow of the page. It is positioned relative to the nearest parent element that has a position other than static.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
div {
  position: absolute;
  top: 0;
  right: 0;
}<\/pre>\n\n\n\n
If no parent has a position set, the element will be placed relative to the whole page.<\/p>\n\n\n\n
Use absolute when you need exact placement of elements like dropdowns or overlays.<\/p>\n\n\n\n
Fixed Position<\/h2>\n\n\n\n
Fixed position keeps the element in the same place even when the page is scrolled. It is always positioned relative to the browser window.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
div {
  position: fixed;
  bottom: 0;
  right: 0;
}<\/pre>\n\n\n\n
Use fixed for elements like navigation bars, chat buttons, or back to top buttons.<\/p>\n\n\n\n
Summary<\/h2>\n\n\n\n
Static follows normal page flow
Relative moves from original position
Absolute is positioned based on parent
Fixed stays in place on the screen<\/p>\n\n\n\n
<\/p>\n","protected":false},"menu_order":0,"template":"","class_list":["post-106","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\n- CSS learning mastery<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gigz.pk\/css\/lesson\/106\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"- CSS learning mastery\" \/>\n<meta property=\"og:description\" content=\"CSS Position Training Content What is CSS Position CSS position is used to control how elements are placed on a web page. It helps you move elements and manage layout more precisely. There are four main types of position values. These are static, relative, absolute, and fixed. Static Position Static is the default position for […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gigz.pk\/css\/lesson\/106\/\" \/>\n<meta property=\"og:site_name\" content=\"CSS learning mastery\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/106\\\/\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/106\\\/\",\"name\":\"- CSS learning mastery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\"},\"datePublished\":\"2026-04-07T01:30:37+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/106\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\",\"name\":\"CSS learning mastery\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gigz.pk\\\/css\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"- CSS learning mastery","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gigz.pk\/css\/lesson\/106\/","og_locale":"en_US","og_type":"article","og_title":"- CSS learning mastery","og_description":"CSS Position Training Content What is CSS Position CSS position is used to control how elements are placed on a web page. It helps you move elements and manage layout more precisely. There are four main types of position values. These are static, relative, absolute, and fixed. Static Position Static is the default position for […]","og_url":"https:\/\/gigz.pk\/css\/lesson\/106\/","og_site_name":"CSS learning mastery","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gigz.pk\/css\/lesson\/106\/","url":"https:\/\/gigz.pk\/css\/lesson\/106\/","name":"- CSS learning mastery","isPartOf":{"@id":"https:\/\/gigz.pk\/css\/#website"},"datePublished":"2026-04-07T01:30:37+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gigz.pk\/css\/lesson\/106\/"]}]},{"@type":"WebSite","@id":"https:\/\/gigz.pk\/css\/#website","url":"https:\/\/gigz.pk\/css\/","name":"CSS learning mastery","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gigz.pk\/css\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson"}],"about":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/types\/lesson"}],"wp:attachment":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}