Learn CSS Positions in 4 minutes

the position property in CSS can assume five possible values static is the default value and will have no effect on the element but when you assign any of these other values then you can use the properties top bottom left right and Z index to position your element exactly where you want it to be if you assigned position relative then we can use these properties to offset the element to itself what does that mean you can change the position of this element relative to its normal position meaning it will be positioned relative to the position where it would be if the element was static declaring top 30 pixels and left 30 pixels will offset the element by 30 pixels from its initial top and left value that means it will be pushed down and pushed to the right by 30 pixels each declaring higher values will push the element further away you can also use bottom or right but that would push the element out of screen as we are always pushing the element away from its static position position fixed will fixate the element to the window that means if we have a scrollable web side then an element with position fixed will follow the user around because the element now sits on another stacking context meaning the element is basically on another layer above everything else now the properties top left right and bottom work differently they are no longer relative to the element itself but rather to the entire window if you set the right property to zero then it will be0 pixels away from the right edge of the screen top zero will position the element 0 pixels away from the top Edge the interest interesting thing about fixed positioning is that now you can also use percentage values for example we can try to Center the element on the screen by setting its top and left value to 50% each looking at the result we can see that in the way the element is centered at least its origin which is the top left corner of the element that is centered but we want the element Center to be Centered for that we need to adjust its transform translate we need to push the element back by 50% relative to its own size meaning Translate 50% for the xais and 50% for the y- AIS as well and there you go this is how you Center an element using fixed positioning this is by the way what these annoying pop-ups use when they want you to accept the cookies now let's talk about position sticky this one is very special a sticky element behaves just like a normal element but when inside a scrollable website or container the moment the element hits a specified position it will stick to that position like a fixed element would as we can see the element will now follow us around on a new stacking context exactly like a fixed element the only difference is that it is not always fixed but only when it reaches that sticking point where exactly that sticking point should be can be specified using top left right and bottom the next position value is position absolute this is by far the most important position an element with position absolute will always be positioned relative to its nearest ancestor that has a specified position let me explain here we have a parent and a child element the child element has a position of absolute to position the child element within the parent element the parent element also needs to have a position value the best value to use here would be position relative as this position value has almost no impact on the element when we are not changing anything using top bottom left and right now our child element can be positioned relative to its parent top zero and right zero will position the child in the top right corner of the parent if we don't have position relative applied to the parent element then the absolute element will be positioned relative to the body understanding absolute positioning will enable you to position your elements inside other elements like this button for example that I put inside the search bar all you need is position absolute on the child and then use position relative on the parent element this will now be your reference point now you can use top left right and bottom to position the element inside that element but be aware of the fact that an absolute positioned element will be in a new stacking context this means that just like a fixed positioned element an absolute element will cover the other elements of the website the cool thing here is you can actually control the order of these layers by using the Z index property if you assign negative values you can put the element behind other elements if you assign a higher value the element will be above the other elements this will be useful for a navigation bar a sidebar an overlay or a popup for example all of these elements should have a higher Z index than the rest of the website this was coding to go and if you learned something new today like And subscribe to support our Channel

Channel: Coding2GO

Views: 10,579

Keywords: css positioning for beginners, css tutorial, position relative, HTML tutorial, CSS positioning, Position relative CSS, Position absolute CSS, Position fixed CSS, Position sticky CSS, Beginner web development, Learn CSS, CSS for beginners, Web design tutorial, position static, beginner tutorial, position crash course, z-index, top, left, right, bottom, stacking context, how to center a div, center a fixed element, position a popup

Id: YEmdHbQBCSQ

Length: 4min 37sec (277 seconds)

Published: Fri Jun 28 2024