[Angular 2 Tutorial] HTML and CSS Tutorial for Beginners – 34 – Absolute Positioning [w/ subs]



00:00:02 – you
00:00:02 – [Music]
00:00:12 – and this allows you to literally place
00:00:14 – any element where you want it to be so
00:00:17 – let me explain with an example how
00:00:19 – absolute positioning works so let's
00:00:24 – create a class for absolute positioning
00:00:26 – so dot ABS POS just like relative
00:00:29 – positioning and we use the same property
00:00:32 – here again so position and this time the
00:00:36 – value is going to be absolute
00:00:39 – now let's specify a top but that'd be
00:00:43 – 200 pixels or let's give it 50 pixels
00:00:46 – let's keep it smaller and then from the
00:00:49 – left once again 80 pixels all right
00:00:55 – now let's create a paragraph tag and we
00:01:00 – can have let's say this is a paragraph
00:01:05 – when you save it and reload it we have
00:01:09 – at the very top this is a paragraph and
00:01:11 – we have not quite applied the class yet
00:01:15 – so let's apply class is equal to ABS POS
00:01:21 – and when we save it now check out check
00:01:25 – it out so this is a paragraph has been
00:01:28 – shifted 80 50 pixels from the top and 80
00:01:31 – pixels from the left but this time and
00:01:33 – is going to be shifted from the top left
00:01:37 – corner of your screen so from the top
00:01:39 – left or from the top it is 100 850
00:01:43 – pixels and from the left it is 80 pixels
00:01:45 – and unlike the relative positioning with
00:01:49 – which shifts the position based on its
00:01:53 – original position absolute positioning
00:01:56 – shifts based on the left top corner of
00:02:00 – your screen so that is kind of like the
00:02:02 – origin for absolute positioning now you
00:02:06 – can combine relative and absolute
00:02:08 – positioning and that can be very helpful
00:02:10 – so let's say we have a div tag let's
00:02:14 – let's create a div tag style so let's
00:02:17 – give it a position and this time it's
00:02:21 – relative and let's create a water for it
00:02:27 – so a boarder is two pixels solid black
00:02:32 – let's give it a height let's let this be
00:02:38 – 500 pixels and a width which can also be
00:02:43 – 500 pixels
00:02:45 – now let's enclose this paragraph within
00:02:49 – a div tag so div and then the end of
00:02:56 – this a closing though
00:03:00 – alright now observe the change now when
00:03:04 – you refresh it there you go so what
00:03:08 – happens with absolute positioning and
00:03:12 – relative positioning is when you have a
00:03:15 – relative positioning to this div tag and
00:03:18 – an absolute positioning to this
00:03:20 – paragraph within the div tag then the
00:03:24 – paragraph is going to shift 50 pixels
00:03:27 – from the top from this particular div
00:03:31 – tag and not from the top of your screen
00:03:33 – and 80 pixels from the left from this
00:03:36 – div tag border and not from the left of
00:03:38 – not from left of the screen so for
00:03:41 – example if we move our div tag top let's
00:03:47 – say 100 pixels and left 100 pixels now
00:03:55 – when you save it and refresh it there
00:03:58 – you go the div tag shifted by 100 pixels
00:04:02 – from its original position so from the
00:04:05 – Left hundred pixels from the top hundred
00:04:07 – pixels but this is a paragraph is it is
00:04:11 – going to maintain its distance of 50
00:04:13 – pixels and 80 pixels from the border of
00:04:16 – this div tag and not from the top of the
00:04:19 – screen or the or from the left of the
00:04:21 – screen so by combining the do sorry by
00:04:26 – combining absolute and relative
00:04:27 – positioning you can have a lot of
00:04:30 – flexibility with how you position your
00:04:32 – elements on your web page and they're
00:04:34 – really really helpful now there's one
00:04:38 – more type of positioning called fixed
00:04:39 – positioning
00:04:40 – and let's see about that in the next
00:04:42 – video
00:04:43 – [Music]


Video Url:
http://youtu.be/06r6FIDDYoE

Comments

comments