title
CSS Positioning Tutorial for Beginners

description
How can we position our elements in CSS and how do the different values for the position property work? Join the full CSS course: https://acad.link/css Join our Academind Community on Discord for free: https://discord.gg/gxvEWGU Read the full article: https://academind.com/learn/css/understanding-css/the-position-property Check out all our other courses: https://academind.com/learn/our-courses ---------- Source code: https://github.com/academind/understanding-css/tree/01-position ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'CSS Positioning Tutorial for Beginners', 'heatmap': [{'end': 287.315, 'start': 263.243, 'weight': 1}, {'end': 440.245, 'start': 423.508, 'weight': 0.751}], 'summary': 'This css positioning tutorial covers the position property values, including static, absolute, relative, and fixed, addressing challenges with static positioning and advocating for alternative values, exploring the impact of changing document flow and positioning context, explaining differences between absolute and fixed positioning, and emphasizing the use of position fixed in creating fixed navigation bars and controlling visual hierarchy with z-index in css.', 'chapters': [{'end': 137.227, 'segs': [{'end': 86.598, 'src': 'embed', 'start': 53.116, 'weight': 1, 'content': [{'end': 54.496, 'text': "that's clear so far.", 'start': 53.116, 'duration': 1.38}, {'end': 58.518, 'text': 'now, the question is is there already some kind of position property applied?', 'start': 54.496, 'duration': 4.022}, {'end': 59.959, 'text': 'The answer is yes.', 'start': 59.198, 'duration': 0.761}, {'end': 63.861, 'text': 'The automatically applied position property is this one.', 'start': 60.499, 'duration': 3.362}, {'end': 65.081, 'text': "It's static.", 'start': 64.321, 'duration': 0.76}, {'end': 70.165, 'text': 'Static simply means that the elements follow the normal document flow,', 'start': 65.642, 'duration': 4.523}, {'end': 74.107, 'text': 'and the normal flow for our block level elements is the one that I just described.', 'start': 70.165, 'duration': 3.942}, {'end': 86.598, 'text': "Now, the problem with that position static declaration is that if you want to do something like this or like this, That's not possible,", 'start': 74.868, 'duration': 11.73}], 'summary': 'The default position property is static, limiting element positioning flexibility.', 'duration': 33.482, 'max_score': 53.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs0853116.jpg'}, {'end': 119.697, 'src': 'embed', 'start': 95.422, 'weight': 0, 'content': [{'end': 103.426, 'text': 'So if you want to change it like this, we should forget about static for now, because we need other values that we can use for our position property.', 'start': 95.422, 'duration': 8.004}, {'end': 108.83, 'text': 'These values are absolute, relative and fixed.', 'start': 103.986, 'duration': 4.844}, {'end': 111.672, 'text': 'Now there is also another value that can be applied.', 'start': 109.31, 'duration': 2.362}, {'end': 116.035, 'text': "It's called sticky and it's kind of a hybrid between absolute and relative.", 'start': 111.752, 'duration': 4.283}, {'end': 119.697, 'text': 'But in this video I really want to focus onto the basics.', 'start': 116.535, 'duration': 3.162}], 'summary': 'Explaining position property values: absolute, relative, fixed, and sticky.', 'duration': 24.275, 'max_score': 95.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs0895422.jpg'}], 'start': 1.451, 'title': 'Css position property', 'summary': 'Delves into the css position property, discussing its various values (static, absolute, relative, fixed) and their effects on element positioning, addressing challenges with static positioning and the need for alternative values.', 'chapters': [{'end': 137.227, 'start': 1.451, 'title': 'Understanding css position property', 'summary': 'Explores the css position property, highlighting the different values (static, absolute, relative, fixed) and their impact on changing the position of elements, addressing the challenges faced with static positioning and the need for alternative values.', 'duration': 135.776, 'highlights': ['The default position property applied to elements is static, which means they follow the normal document flow and cannot be repositioned without alternative values (absolute, relative, fixed).', 'The values absolute, relative, and fixed provide the ability to reposition elements on a website, allowing for more flexible layout designs and arrangements.', 'The chapter emphasizes the need to understand and utilize alternative position values (absolute, relative, fixed) to achieve desired element positioning on a website.']}], 'duration': 135.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs081451.jpg', 'highlights': ['The values absolute, relative, and fixed provide the ability to reposition elements on a website, allowing for more flexible layout designs and arrangements.', 'The default position property applied to elements is static, which means they follow the normal document flow and cannot be repositioned without alternative values (absolute, relative, fixed).', 'The chapter emphasizes the need to understand and utilize alternative position values (absolute, relative, fixed) to achieve desired element positioning on a website.']}, {'end': 821.207, 'segs': [{'end': 181.403, 'src': 'embed', 'start': 158.115, 'weight': 0, 'content': [{'end': 167.958, 'text': 'so the top, left, bottom and right property, and with these properties we can then change the position of the element, so top, bottom and so on.', 'start': 158.115, 'duration': 9.843}, {'end': 176.101, 'text': 'now the problem is that if you apply something like top, you need kind of a reference or a positioning context as written right here,', 'start': 167.958, 'duration': 8.143}, {'end': 180.322, 'text': 'because we want to move our element down from the top of what.', 'start': 176.101, 'duration': 4.221}, {'end': 181.403, 'text': "so what's our starting point?", 'start': 180.322, 'duration': 1.081}], 'summary': 'Using top, left, bottom, and right properties to change element position, requiring a reference for positioning context.', 'duration': 23.288, 'max_score': 158.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08158115.jpg'}, {'end': 296.219, 'src': 'heatmap', 'start': 263.243, 'weight': 1, 'content': [{'end': 268.386, 'text': "So let's add right here position absolute like that.", 'start': 263.243, 'duration': 5.143}, {'end': 271.848, 'text': 'If we now save that and go back to our page and reload it.', 'start': 269.146, 'duration': 2.702}, {'end': 277.219, 'text': 'Well, we can see that the nav element apparently disappeared.', 'start': 273.151, 'duration': 4.068}, {'end': 287.315, 'text': "Of course it didn't, because if we click right here into our body, we can see that nav is still there, but it's somehow below our header element now.", 'start': 278.08, 'duration': 9.235}, {'end': 296.219, 'text': 'Now, why is this happening? Well, with position absolute, we kind of excluded the header element from the normal document workflow.', 'start': 287.655, 'duration': 8.564}], 'summary': 'Adding position absolute caused nav element to move below header.', 'duration': 32.976, 'max_score': 263.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08263243.jpg'}, {'end': 400.137, 'src': 'embed', 'start': 371.639, 'weight': 2, 'content': [{'end': 376.182, 'text': 'We positioned the header element in the top left corner of the HTML element.', 'start': 371.639, 'duration': 4.543}, {'end': 385.788, 'text': 'Now, why is this happening? Well, with the position absolute declaration, we now positioned the header element relative to its containing element.', 'start': 376.722, 'duration': 9.066}, {'end': 391.712, 'text': 'And the containing element in the structure we have right here is the HTML element.', 'start': 386.409, 'duration': 5.303}, {'end': 392.593, 'text': "That's important.", 'start': 392.012, 'duration': 0.581}, {'end': 400.137, 'text': 'And this means as the absolute positioning with top 0 and left 0 now refers to the HTML element.', 'start': 393.073, 'duration': 7.064}], 'summary': 'Positioned header element in top left corner of html, using absolute positioning.', 'duration': 28.498, 'max_score': 371.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08371639.jpg'}, {'end': 455.997, 'src': 'heatmap', 'start': 423.508, 'weight': 0.751, 'content': [{'end': 429.231, 'text': 'Because right here I will now also add position absolute like that.', 'start': 423.508, 'duration': 5.723}, {'end': 435.494, 'text': "Save that and let's go back to our page and let's see what happens now if I reload the page.", 'start': 430.351, 'duration': 5.143}, {'end': 440.245, 'text': 'Well, then you can see that two things changed.', 'start': 437.202, 'duration': 3.043}, {'end': 455.997, 'text': 'The header element is now in the top left corner of the body element because by adding the position property to this containing element and body is the containing element of the header element.', 'start': 440.925, 'duration': 15.072}], 'summary': 'Adding position absolute shifted header to top left corner of body.', 'duration': 32.489, 'max_score': 423.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08423508.jpg'}, {'end': 516.479, 'src': 'embed', 'start': 484.703, 'weight': 3, 'content': [{'end': 489.985, 'text': 'because now the elements neither the body nor the header occupies the entire space.', 'start': 484.703, 'duration': 5.282}, {'end': 491.566, 'text': 'So this was also changed.', 'start': 490.385, 'duration': 1.181}, {'end': 501.789, 'text': 'As said before, this is due to the fact that, with the position absolute declaration, we exclude this element from the normal document workflow,', 'start': 491.866, 'duration': 9.923}, {'end': 503.39, 'text': 'in this case of a block level element.', 'start': 501.789, 'duration': 1.601}, {'end': 507.372, 'text': "now let's go back to our code again and change another thing.", 'start': 504.23, 'duration': 3.142}, {'end': 516.479, 'text': "let's now change the body element and add top zero right here, like we did with the header.", 'start': 507.372, 'duration': 9.107}], 'summary': 'Changes made to body and header elements to include position absolute declaration, altering layout.', 'duration': 31.776, 'max_score': 484.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08484703.jpg'}], 'start': 137.968, 'title': 'Changing positioning in css', 'summary': 'Discusses changing the document flow and positioning context in css, exploring various values to alter element positions, emphasizing the use of position absolute and relative with examples. it highlights the impact on document flow and positioning context.', 'chapters': [{'end': 246.775, 'start': 137.968, 'title': 'Changing document flow and positioning context', 'summary': 'Discusses changing the document flow and positioning context in css, explaining how different values can be used to alter the position of elements and the need for a reference or positioning context. it also demonstrates a basic code example with block-level elements and the corresponding css styling.', 'duration': 108.807, 'highlights': ["Different values in CSS can be used to alter the position of elements, such as top, left, bottom, and right properties. The chapter explains how using different values in CSS can change the position of elements, such as top, left, bottom, and right properties, allowing for manipulation of the element's position.", "The need for a reference or positioning context is emphasized when applying properties like 'top' in CSS. It is highlighted that when applying properties like 'top' in CSS, a reference or positioning context is needed to establish the starting point for the element's movement.", 'A basic code example with block-level elements and corresponding CSS styling is demonstrated, showcasing the practical application of the concepts discussed. The chapter provides a demonstration of a basic code example with block-level elements and corresponding CSS styling, offering a practical application of the concepts discussed.']}, {'end': 821.207, 'start': 247.615, 'title': 'Changing position of block level elements', 'summary': 'Explains the use of position absolute and position relative to change the positioning of block level elements in html, highlighting how these properties affect the document flow and the context of positioning.', 'duration': 573.592, 'highlights': ['The use of position absolute to position the header element in the top left corner of the HTML element is explained, with the implications on the document workflow and the context of positioning.', "The application of position absolute to the body element is demonstrated, showcasing the change in positioning context and the impact on the element's layout within the document flow.", "The difference between using position relative and position absolute in changing the position of block level elements is highlighted, emphasizing the impact on the elements' layout and the document flow."]}], 'duration': 683.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08137968.jpg', 'highlights': ['Different values in CSS can be used to alter the position of elements, such as top, left, bottom, and right properties.', "The need for a reference or positioning context is emphasized when applying properties like 'top' in CSS.", 'The use of position absolute to position the header element in the top left corner of the HTML element is explained, with the implications on the document workflow and the context of positioning.', "The difference between using position relative and position absolute in changing the position of block level elements is highlighted, emphasizing the impact on the elements' layout and the document flow."]}, {'end': 987.987, 'segs': [{'end': 996.513, 'src': 'embed', 'start': 967.855, 'weight': 0, 'content': [{'end': 975.619, 'text': 'and with position fixed we can do that because, as i said before, it always refers to the viewport.', 'start': 967.855, 'duration': 7.764}, {'end': 979.882, 'text': "now that's interesting, but there are two more things that i would like to show you right here.", 'start': 975.619, 'duration': 4.263}, {'end': 987.987, 'text': 'the first thing is that with position fixed we are not only able to kind of position our element depending on the viewport.', 'start': 979.882, 'duration': 8.105}, {'end': 996.513, 'text': 'there is also another cool thing, and to see this thing we should go back to our code and just add a height of, for example,', 'start': 987.987, 'duration': 8.526}], 'summary': 'Position fixed allows element positioning relative to viewport, with additional features.', 'duration': 28.658, 'max_score': 967.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08967855.jpg'}], 'start': 821.747, 'title': 'Css positioning', 'summary': "Explains the differences between 'absolute' and 'fixed' positioning in css, highlighting key points and quantifiable data, and delves into how 'fixed' positioning refers to the viewport and its implications for element positioning.", 'chapters': [{'end': 987.987, 'start': 821.747, 'title': 'Css positioning explained', 'summary': "Explains the differences between 'absolute' and 'fixed' positioning in css, highlighting the key points and quantifiable data, and then delves into how 'fixed' positioning refers to the viewport and its implications for element positioning.", 'duration': 166.24, 'highlights': ["The 'fixed' position value in CSS allows elements to be positioned relative to the viewport, unlike 'absolute' positioning which depends on the positioning context, as demonstrated by the differences in element placement.", "The 'fixed' positioning property in CSS establishes that elements are positioned with respect to the viewport, which differs from 'absolute' positioning, as seen in the example of adding an element to the top of the page.", "The demonstration of using 'fixed' positioning in CSS emphasizes that it always refers to the viewport, enabling the element to be positioned irrespective of the surrounding elements or the page structure."]}], 'duration': 166.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08821747.jpg', 'highlights': ["The 'fixed' position value in CSS allows elements to be positioned relative to the viewport, unlike 'absolute' positioning which depends on the positioning context, as demonstrated by the differences in element placement.", "The 'fixed' positioning property in CSS establishes that elements are positioned with respect to the viewport, which differs from 'absolute' positioning, as seen in the example of adding an element to the top of the page.", "The demonstration of using 'fixed' positioning in CSS emphasizes that it always refers to the viewport, enabling the element to be positioned irrespective of the surrounding elements or the page structure."]}, {'end': 1210.832, 'segs': [{'end': 1041.647, 'src': 'embed', 'start': 1012.004, 'weight': 0, 'content': [{'end': 1014.686, 'text': 'but if i now scroll down, Can you see it?', 'start': 1012.004, 'duration': 2.682}, {'end': 1023.013, 'text': 'Now we see that our footer element, so the element with position fixed applied, kind of sticks on top of our page.', 'start': 1015.366, 'duration': 7.647}, {'end': 1031.78, 'text': 'And this is pretty awesome, actually, because with that, we can easily create some fixed navigation bar on top of our page if you wanted, for example.', 'start': 1023.353, 'duration': 8.427}, {'end': 1034.863, 'text': 'now. that was the first thing that i wanted to show you.', 'start': 1032.54, 'duration': 2.323}, {'end': 1041.647, 'text': 'but there is one last thing in this video that i would like you to know, and this last thing is relevant.', 'start': 1034.863, 'duration': 6.784}], 'summary': 'Demonstrating fixed position element with scrolling and potential applications like fixed navigation bar.', 'duration': 29.643, 'max_score': 1012.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs081012004.jpg'}, {'end': 1148.331, 'src': 'embed', 'start': 1103.686, 'weight': 1, 'content': [{'end': 1107.349, 'text': 'if you want to have header above the footer or the other way around, like we have it right here.', 'start': 1103.686, 'duration': 3.663}, {'end': 1112.013, 'text': 'well then, you have to change the so-called z-index.', 'start': 1108.13, 'duration': 3.883}, {'end': 1113.134, 'text': 'how does this work?', 'start': 1112.013, 'duration': 1.121}, {'end': 1121.902, 'text': "well, let's go back and let's apply a z-index right here of one.", 'start': 1113.134, 'duration': 8.768}, {'end': 1124.944, 'text': 'so always, just a simple number could be 100 also, or something like that.', 'start': 1121.902, 'duration': 3.042}, {'end': 1128.967, 'text': "but let's use, or let's use 10, maybe like that.", 'start': 1124.944, 'duration': 4.023}, {'end': 1137.185, 'text': 'and if we now go back right here and reload the page, We can now see that the header is kind of ahead of the footer element,', 'start': 1128.967, 'duration': 8.218}, {'end': 1142.088, 'text': 'because we gave this z-index, which kind of defines the well, as the name says, the z-index.', 'start': 1137.185, 'duration': 4.903}, {'end': 1145.83, 'text': 'So if you imagine a page like this, then you define if it should be right there or right there.', 'start': 1142.128, 'duration': 3.702}, {'end': 1148.331, 'text': "That's what you basically do with the z-index.", 'start': 1146.19, 'duration': 2.141}], 'summary': 'Changing z-index to 10 makes header ahead of footer.', 'duration': 44.645, 'max_score': 1103.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs081103686.jpg'}], 'start': 987.987, 'title': 'Css positioning', 'summary': 'Covers position fixed in html elements for creating fixed navigation bars, its effects on multiple elements, and the concept of z-index in css for changing the order of elements with practical examples, emphasizing its importance in visual hierarchy control.', 'chapters': [{'end': 1083.68, 'start': 987.987, 'title': 'Position fixed and scrolling', 'summary': 'Covers the concept of position fixed in html elements, demonstrating its use for creating fixed navigation bars and the effects of applying it to multiple elements, with a demonstration of how they interact with the viewport and scroll.', 'duration': 95.693, 'highlights': ['The footer element with position fixed sticks on top of the page, demonstrating the use of position fixed for creating fixed navigation bars.', 'Applying position fixed to both footer and header elements results in both being fixed on top of the page, showing the interaction of multiple fixed elements with the viewport and scroll.']}, {'end': 1210.832, 'start': 1083.68, 'title': 'Css positioning theory', 'summary': 'Explains the concept of z-index in css for changing the order of elements on a webpage, with an example of positioning the header and footer, highlighting the importance of z-index in controlling the visual hierarchy of elements.', 'duration': 127.152, 'highlights': ['The z-index property in CSS can be used to change the order of elements on a webpage, with a higher value bringing the element forward in the visual hierarchy, as demonstrated by positioning the header and footer with z-index values of 10 and 11 respectively.', 'Understanding z-index is crucial for effectively positioning different elements on a webpage to ensure the desired visual layout and hierarchy, enhancing the overall appearance and user experience.']}], 'duration': 222.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wmAP2xvNs08/pics/wmAP2xvNs08987987.jpg', 'highlights': ['Applying position fixed to both footer and header elements results in both being fixed on top of the page, showing the interaction of multiple fixed elements with the viewport and scroll.', 'Understanding z-index is crucial for effectively positioning different elements on a webpage to ensure the desired visual layout and hierarchy, enhancing the overall appearance and user experience.', 'The z-index property in CSS can be used to change the order of elements on a webpage, with a higher value bringing the element forward in the visual hierarchy, as demonstrated by positioning the header and footer with z-index values of 10 and 11 respectively.', 'The footer element with position fixed sticks on top of the page, demonstrating the use of position fixed for creating fixed navigation bars.']}], 'highlights': ['The z-index property in CSS can be used to change the order of elements on a webpage, with a higher value bringing the element forward in the visual hierarchy, as demonstrated by positioning the header and footer with z-index values of 10 and 11 respectively.', 'Applying position fixed to both footer and header elements results in both being fixed on top of the page, showing the interaction of multiple fixed elements with the viewport and scroll.', "The demonstration of using 'fixed' positioning in CSS emphasizes that it always refers to the viewport, enabling the element to be positioned irrespective of the surrounding elements or the page structure.", "The 'fixed' positioning property in CSS establishes that elements are positioned with respect to the viewport, which differs from 'absolute' positioning, as seen in the example of adding an element to the top of the page.", "The need for a reference or positioning context is emphasized when applying properties like 'top' in CSS."]}