{"id":14767,"date":"2020-09-17T11:34:16","date_gmt":"2020-09-17T18:34:16","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14767"},"modified":"2023-12-01T04:00:10","modified_gmt":"2023-12-01T12:00:10","slug":"css-position","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-position\/","title":{"rendered":"A Step-By-Step Guide to CSS Position"},"content":{"rendered":"\n<p><em>The CSS position property modifies the position of an element on an HTML page. top, right, left, and bottom properties define where an element is positioned relative to the edge of the box. The position CSS property has five values: static, fixed, relative, sticky, and absolute. <\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Positioning elements in the right place based on a specification is an important part of good <a href=\"https:\/\/careerkarma.com\/blog\/difference-between-ux-and-ui\/\">web design<\/a>.<\/p>\n\n\n\n<p>That\u2019s where the CSS position property comes in. The position property has five values that you can use to define how an element should be positioned on a web page.<\/p>\n\n\n\n<p>This tutorial will discuss, with examples, how to use the <a href=\"https:\/\/careerkarma.com\/blog\/css-background-position\/\">position property <\/a>to position an element on a web page. After reading this tutorial, you\u2019ll be an expert at using the position property to position elements on a web page in CSS.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-69e71b88255bc\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e71b88255bc\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#css-position\" >CSS Position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#css-position-values\" >CSS Position Values<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#static-position\" >Static Position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#fixed-position\" >Fixed Position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#relative-position\" >Relative Position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#sticky-position\" >Sticky Position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#absolute-position\" >Absolute Position<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-position\"><\/span>CSS Position<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The position property allows you to define the position of an element on a web page. The syntax for the position property is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>position: positionType;<\/pre><\/div>\n\n\n\n<p>There are a number of situations where the position property can be useful. You may decide you want it to design a navigation bar that is fixed at the bottom of the page, for instance.<\/p>\n\n\n\n<p>There are five values that you can use to set the position of an element on a web page:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>static<\/li><li>fixed<\/li><li>relative<\/li><li>sticky<\/li><li>absolute<\/li><\/ul>\n\n\n\n<p>Using one of the five values above, you can specify how an element should be positioned. You can use the top, bottom, left, and right properties to further define the element\u2019s position on the page. We\u2019ll discuss how this works in our examples for this article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css-position-values\"><\/span>CSS Position Values<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We can start to explore how to use each of the potential values of the position property. Let\u2019s walk through an example of each of the values you can use with the position property.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"static-position\"><\/span>Static Position<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/careerkarma.com\/blog\/html-coding-basics\/\">HTML<\/a> elements are positioned as static by default. This means that an element is not affected by the top, bottom, left, and right CSS properties. Browsers automatically render elements in the static position unless the code indicates otherwise.<\/p>\n\n\n\n<p>For instance, suppose we are designing a box that contains some text. If we want to position the contents of this box using default positions, we can use this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;div class=&quot;outer&quot;&gt;\n\t&lt;p&gt;This is a positioned box.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n\n.outer {\n\tposition: static;\n\tborder: 2px solid lightblue;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We created a box that is positioned statically on the page. In other words, the box is not positioned in any particular way; rather, its position is based on browser defaults. Our box has a <a href=\"https:\/\/careerkarma.com\/blog\/css-borders\/\">2px-wide solid light blue border<\/a>.\u00a0This border makes the box more visible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"fixed-position\"><\/span>Fixed Position<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The fixed value positions an element at a particular place on a web page.\u00a0<\/p>\n\n\n\n<p>When you use the fixed value, the element that is fixed will always stay in the same place. The element will stay fixed even if the user scrolls down the web page. This is because the element is removed from the normal web page view. To position an element using the fixed value property, you must use the top, right, bottom, and left properties.&nbsp;<\/p>\n\n\n\n<p>We want to create a box and fix it to the bottom right corner of a web page. We can do so using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;p&gt;This is the contents of a web page.&lt;\/p&gt;\n&lt;div class=&quot;outer&quot;&gt;\n\t&lt;p&gt;This is a positioned box.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n\n.outer {\n\twidth: 200px;\n\tborder: 2px solid lightblue;\n\tposition: fixed;\n\tbottom: 0;\n\tright: 0;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In this example, we used the fixed position value to create a box that is fixed to a specific position on the web page. The bottom: 0 and right: 0 properties position the box at the bottom right-hand corner of the web page.<\/p>\n\n\n\n<p>We specified that the width of our box should be 200px. Our box should have a 2px solid light blue border. These styles make our box easily visible.<\/p>\n\n\n\n<p>As you can see in the image above, our box is positioned in the bottom right-hand corner of our web page. When the user scrolls down, the box will retain its position on the screen. This means that the user will continue to see the box at the bottom right of their screen, even when they scroll.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"relative-position\"><\/span>Relative Position<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The relative value positions an element relative to its default position.&nbsp;<\/p>\n\n\n\n<p>The relative value is used in addition to a top, bottom, left, or right property. Those four properties specify how an element will be offset from its default position. The space created by a relatively positioned box will not be filled by another element.<\/p>\n\n\n\n<p>For instance, if you wanted to position an element relative to a 50px left border, you would specify a value for the left property. Here\u2019s the code we would use to create such a box:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;p&gt;This is the contents of a web page.&lt;\/p&gt;\n&lt;div class=&quot;outer&quot;&gt;\n\t&lt;p&gt;This is a positioned box.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n\n.outer {\nposition: relative;\nleft: 50px;\n\tborder: 2px solid lightblue;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In this example, we defined a box with relative positioning. We used the left property to offset our box to the left by 50px. As you can see, there is a 50px gap between the start of our page and the start of our box. We created this using the position: relative and left: 50px properties.<\/p>\n\n\n\n<p>The space created to the left of our box will not be filled by any other element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"sticky-position\"><\/span>Sticky Position<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The sticky position value positions an element relatively until a visitor crosses a threshold. Then, the element has a fixed position.<\/p>\n\n\n\n<p>The sticky position is essentially a mix of the relative and fixed positions. When a sticky element loads, it is relatively positioned. The element stays bound to a fixed position after the user scrolls down past a certain point on the page.<\/p>\n\n\n\n<p>Using a sticky position is useful if you want to preserve the flow of a document. You can make elements stick to a particular position so a visitor does not lose sight of that element.<\/p>\n\n\n\n<p>The sticky position is commonly used with navigation bars that stick to the top of the screen when the user scrolls down the page.<\/p>\n\n\n\n<p>We want a box to appear at the top of our page. This box should appear after some text and then stick to the top when the user scrolls down to the image. We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;p&gt;Lorem ipsum dolor sit amet, \u2026 &lt;\/p&gt;\n&lt;div&gt;\n\t&lt;p class=&quot;inner&quot;&gt;This is a positioned box.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;p&gt;Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. \u2026 &lt;\/p&gt;\n\n&lt;style&gt;\n\n.inner {\n\tposition: sticky;\n\ttop: 0;\n\tborder: 2px solid lightblue;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In this image, you can see that the box appears after our first paragraph of text. This is because the user has not yet scrolled down and met the box. This is what happens when our user scrolls down past the box:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/NAYKQL8FeA5FhZCIwm1mcxsDqPBeRi5GZKfWJ03IAZZTVGPYylRgRxQN8v4E1yh6a86gIwsl9gwKcID5peFumzfMWobtHNU2SFbi_Dg3JJNf8DJ5sVlf0uTf6jIlFIlyyKXtIEC-\" alt=\"\"\/><\/figure>\n\n\n\n<p>At the top of our page, we have a paragraph of <code>Lorem ipsum \u2026<\/code>  standard text. We fixed a box containing the text <code>This is a positioned box<\/code> beneath this paragraph. Additionally, when the user scrolls down to the positioned box that we declared, the box is bound to the top of the screen. As the user keeps scrolling, the box will stay at the top of their screen.<\/p>\n\n\n\n<p>The box will return to its initial position between the two paragraphs of text.&nbsp;This will only happen when a user scrolls above the box.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"absolute-position\"><\/span>Absolute Position<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The absolute value positions an element relative to another, already-positioned element.\u00a0<\/p>\n\n\n\n<p>The absolute property positions an element relative to another, already-positioned element.&nbsp;For instance, an absolute positioned element may be the text inside a box that includes a paragraph of text. This box could have a relative or fixed position.<\/p>\n\n\n\n<p>We are designing a box that we want to appear at the bottom left-hand corner of another box. We can create these boxes using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;div class=&quot;outer&quot;&gt;\n\t&lt;p&gt;This is the outer box.&lt;\/p&gt;\n\t&lt;p class=&quot;inner&quot;&gt;This is a positioned box.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n\n.outer {\n\tposition: relative;\n\tborder: 2px solid lightblue;\n\twidth: 300px;\n\theight: 300px;\n}\n\n.inner {\n\tposition: absolute;\n\tleft: 0;\n\tbottom: 0;\n\tborder: 2px solid pink;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In our HTML file, we define two boxes. We declare the first box using a &lt;div> tag and assign it the class <em>outer<\/em>. This means the box will have the CSS styles associated with the <em>outer<\/em> class. We declare the second box using a &lt;p> tag and assign it the class <em>inner<\/em>.<\/p>\n\n\n\n<p>In our CSS file, we specify that our outer box should:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Be positioned relative to other elements on the web page.<\/li><li>Have a 2px-wide solid light blue border.<\/li><li>Be 300px wide by 300px tall.<\/li><\/ul>\n\n\n\n<p>We specify that our inner box should:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Be positioned absolutely.<\/li><li>Be positioned at the bottom left of our outer box (using left: 0, bottom: 0).<\/li><li>Have a 2px-wide solid pink border.<\/li><\/ul>\n\n\n\n<p>In this example we positioned the pink box (<code>inner<\/code>) at the bottom left of the <code>outer<\/code> box. If we were to use the fixed keyword, on the other hand, the pink box would be positioned at the bottom of our web page.&nbsp;<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/repl.it\/@careerkarma\/CSS-Position?lite=true\" width=\"100%\" height=\"400px\" frameborder=\"0\"><\/iframe>\n<br>\n<br>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The <a href=\"https:\/\/careerkarma.com\/blog\/beginners-guide-to-css\/\">CSS<\/a> position property defines the position of an element on a web page. The top, right, bottom, and left properties place an element in a particular place on the web page. Now you\u2019re ready to start positioning elements in CSS using the position property like a pro!<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS position property modifies the position of an element on an HTML page. top, right, left, and bottom properties define where an element is positioned relative to the edge of the box. The position CSS property has five values: static, fixed, relative, sticky, and absolute. Positioning elements in the right place based on a&hellip;","protected":false},"author":240,"featured_media":14768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14767","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Step-By-Step Guide to CSS Position | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS position property defines how an element should be positioned on a web page. Learn how to use the position property in this article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-position\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Step-By-Step Guide to CSS Position\" \/>\n<meta property=\"og:description\" content=\"The CSS position property defines how an element should be positioned on a web page. Learn how to use the position property in this article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-position\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-17T18:34:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/white-printer-paper-196645.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"A Step-By-Step Guide to CSS Position\",\"datePublished\":\"2020-09-17T18:34:16+00:00\",\"dateModified\":\"2023-12-01T12:00:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/\"},\"wordCount\":1507,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/white-printer-paper-196645.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/\",\"name\":\"A Step-By-Step Guide to CSS Position | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/white-printer-paper-196645.jpg\",\"datePublished\":\"2020-09-17T18:34:16+00:00\",\"dateModified\":\"2023-12-01T12:00:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS position property defines how an element should be positioned on a web page. Learn how to use the position property in this article.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/white-printer-paper-196645.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/white-printer-paper-196645.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-position\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Step-By-Step Guide to CSS Position\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Step-By-Step Guide to CSS Position | Career Karma","description":"The CSS position property defines how an element should be positioned on a web page. Learn how to use the position property in this article.","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:\/\/careerkarma.com\/blog\/css-position\/","og_locale":"en_US","og_type":"article","og_title":"A Step-By-Step Guide to CSS Position","og_description":"The CSS position property defines how an element should be positioned on a web page. Learn how to use the position property in this article.","og_url":"https:\/\/careerkarma.com\/blog\/css-position\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-09-17T18:34:16+00:00","article_modified_time":"2023-12-01T12:00:10+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/white-printer-paper-196645.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-position\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-position\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"A Step-By-Step Guide to CSS Position","datePublished":"2020-09-17T18:34:16+00:00","dateModified":"2023-12-01T12:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-position\/"},"wordCount":1507,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-position\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/white-printer-paper-196645.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-position\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-position\/","url":"https:\/\/careerkarma.com\/blog\/css-position\/","name":"A Step-By-Step Guide to CSS Position | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-position\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-position\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/white-printer-paper-196645.jpg","datePublished":"2020-09-17T18:34:16+00:00","dateModified":"2023-12-01T12:00:10+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS position property defines how an element should be positioned on a web page. Learn how to use the position property in this article.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-position\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-position\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-position\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/white-printer-paper-196645.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/white-printer-paper-196645.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-position\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"A Step-By-Step Guide to CSS Position"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14767"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14767\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14768"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}