WEBVTT FILE





1
00:00:06.830 --> 00:00:11.490
in this video we're going to learn how to position HTML elements we're gonna

2
00:00:11.490 --> 00:00:15.750
use the same source code that we used for the floating video just gonna get

3
00:00:15.750 --> 00:00:19.760
rid of the floating properties for now alright and and also we have changed the

4
00:00:26.849 --> 00:00:35.730
title to positioning okay so first of all positioning means that we are

5
00:00:35.730 --> 00:00:42.000
setting a certain location for our HTML elements and also we want to define how

6
00:00:42.000 --> 00:00:48.360
these elements are gonna wave in the flow of the webpage so there are four

7
00:00:48.360 --> 00:00:54.180
types of positions the first type is the static position which is the standard

8
00:00:54.180 --> 00:00:59.030
position so all the elements that we have seen here for now are by default

9
00:00:59.030 --> 00:01:04.409
set to standard position static position so static position means that they are

10
00:01:04.409 --> 00:01:09.630
all behaving according to the normal flow of the webpage the second type

11
00:01:09.630 --> 00:01:15.689
that's we're gonna apply for the Facebook div for instance is the fixed

12
00:01:15.689 --> 00:01:25.470
position so the syntax is easy so position fixed so that's the proposition

13
00:01:25.470 --> 00:01:33.420
and then we can define a top value for instance 20 pixels or 30 pixels and a

14
00:01:33.420 --> 00:01:46.200
left value so first fixed position means that's Facebook now is positioned using

15
00:01:46.200 --> 00:01:52.470
a fixed position type which means that all the other elements are ignoring

16
00:01:52.470 --> 00:01:59.640
Facebook in the flow of the webpage and top of 30 pixels means that we are 30

17
00:01:59.640 --> 00:02:06.320
pixels away from the top of the page and 30 pixels away from the left of the page

18
00:02:06.320 --> 00:02:12.750
all right so that's what a fixed position means

19
00:02:12.750 --> 00:02:21.000
now if we move to the Apple TV and we choose a position relative and also

20
00:02:21.000 --> 00:02:27.180
let's set a top of 20 pixels for instance and a left of 20 pixels so this

21
00:02:27.180 --> 00:02:34.830
means that Apple now is positioned relative to its original position which

22
00:02:34.830 --> 00:02:40.830
was supposed to be to start there and we are at 20 pixels away from the top

23
00:02:40.830 --> 00:02:46.400
original position and 20 pixels away from the left original position

24
00:02:46.400 --> 00:02:51.720
unlike the fixed position Apple still preserves its original position in the

25
00:02:51.720 --> 00:02:57.240
flow so all the other elements so Microsoft for instance is still behaving

26
00:02:57.240 --> 00:03:04.350
as if Apple is still in its original position and also Apple now shows on top

27
00:03:04.350 --> 00:03:08.790
of Facebook once we are at the positioning to Apple and we'll

28
00:03:08.790 --> 00:03:13.860
understand why in a little bit so now we're gonna move to the Microsoft Steve

29
00:03:13.860 --> 00:03:17.250
and we're gonna define another type of position and this time is going to be

30
00:03:17.250 --> 00:03:21.630
the absolute position so absolute positioning is a little bit different

31
00:03:21.630 --> 00:03:28.320
from the other two types so this sets first a top of 40 pixels for instance

32
00:03:28.320 --> 00:03:35.430
and a left of 40 as well so absolute positioning means that we are

33
00:03:35.430 --> 00:03:41.190
positioning the elements relative to the first parents that is non-static and if

34
00:03:41.190 --> 00:03:45.540
there is no such a parent that is non-static then we're going to be

35
00:03:45.540 --> 00:03:52.880
positioning the elements relative to the HTML elements which is our case here so

36
00:03:55.770 --> 00:04:01.600
now if we want to review how elements they show on top of the other and we

37
00:04:01.600 --> 00:04:07.980
want to decide which elements shows on top then we can use a z-index property

38
00:04:07.980 --> 00:04:19.959
let's try that with Facebook Apple so let's give Facebook as an index of one

39
00:04:19.959 --> 00:04:27.790
and let's give Apple a set index of two so the elements with the greater set

40
00:04:27.790 --> 00:04:32.590
index is going to show on top of the other elements with the smaller Z index

41
00:04:32.590 --> 00:04:38.860
also if there is an element with no set index and all the other elements are

42
00:04:38.860 --> 00:04:43.330
having a Z index then the elements with these head index are going to show on

43
00:04:43.330 --> 00:04:49.120
top so if we change the set index of Apple now to zero then we can see that

44
00:04:49.120 --> 00:04:56.530
Facebook now shows on top ok also if there is an element that is positioned

45
00:04:56.530 --> 00:05:01.660
and all the other elements are not positioned then that element which is

46
00:05:01.660 --> 00:05:07.990
positioned is going to show on top so if we get rid of the so let's say we get

47
00:05:07.990 --> 00:05:16.530
rid of the positioning of Apple so Apple is going to show behind everything else

48
00:05:16.530 --> 00:05:25.240
because everything else is positioned and Apple is not positioned okay also if

49
00:05:25.240 --> 00:05:32.680
all the elements are positioned and there is no set index let's try that so

50
00:05:32.680 --> 00:05:41.680
if we take out the Z index so the element that comes last in the HTML code

51
00:05:41.680 --> 00:05:46.510
is going to be the one that shows on top in our case Microsoft's will show on top

52
00:05:46.510 --> 00:05:51.820
of Apple and Apple will show on top of Facebook as far as we don't have any set

53
00:05:51.820 --> 00:05:57.760
index all right so this is it's regarding the positioning in the next

54
00:05:57.760 --> 00:06:01.620
video you're gonna move to the display