1
00:00:05,410 --> 00:00:15,070
In the previous lesson, we discussed position and now to a web developer, often using the excess,

2
00:00:15,340 --> 00:00:26,560
mentioning Z index and overflow comes surely as natural position, in fact, above all, in the absolute

3
00:00:26,560 --> 00:00:36,430
attribute which we are inserting straight away, as we have seen, associating to top a single value

4
00:00:36,580 --> 00:00:45,160
for age two, which is inserted twice in within the sheet, makes Section one and Section two overlap

5
00:00:45,700 --> 00:00:49,780
in order to avoid this type of overlapping.

6
00:00:52,020 --> 00:01:00,900
We are going to insert into the age TMA five five new classes associated to the age two so that they

7
00:01:00,900 --> 00:01:03,820
can get inserted in the stylesheet.

8
00:01:04,680 --> 00:01:09,870
We will call them head or one and head to.

9
00:01:14,960 --> 00:01:22,690
And so doing one saved and once the styles have been added to our sheet.

10
00:01:23,130 --> 00:01:24,770
OK, had a one.

11
00:01:27,360 --> 00:01:28,860
And head to.

12
00:01:31,520 --> 00:01:42,500
We can assess with our Z index which header should appear first in this moment, Section two is overlapping

13
00:01:42,500 --> 00:01:43,490
Section one.

14
00:01:44,870 --> 00:01:47,530
And that means it is just overate.

15
00:01:50,640 --> 00:02:02,220
If we inserted within had one that index on to and within header to.

16
00:02:03,300 --> 00:02:16,680
Z index on one by saving and refreshing, we would see that by selecting Section one now appears before

17
00:02:16,680 --> 00:02:26,790
the other header, so that index has the aim of prioritizing one specific selector.

18
00:02:27,870 --> 00:02:39,210
To make it in case of overlapping inside the page appear before or after the following, and this numeric

19
00:02:39,230 --> 00:02:50,220
representation will enable us to insert different levels of depth, which, by showing a greater number,

20
00:02:50,550 --> 00:02:53,220
would be displayed above the others.

21
00:02:53,230 --> 00:03:02,460
In this case, two overlaps, one, and in case of the where a third header with that index fixed at

22
00:03:02,460 --> 00:03:08,700
three, the same would overlap both after the different levels of depth.

23
00:03:08,730 --> 00:03:11,600
Let's move now to the overflow topic.

24
00:03:11,940 --> 00:03:21,120
Therefore, for example, referring to a paragraph when the content of it gets limited by a limited

25
00:03:21,270 --> 00:03:27,000
defined by the height inserted as property in the reference selector.

26
00:03:27,540 --> 00:03:37,800
Therefore, if we go to age five inside the first paragraph, we insert a class which we are naming

27
00:03:38,170 --> 00:03:48,480
with one as a reference to overflow one by getting back to our file and adding of one to the stylesheet.

28
00:03:50,140 --> 00:03:54,460
We can insert overflow hadyn.

29
00:03:56,120 --> 00:03:57,070
Within it.

30
00:03:58,730 --> 00:04:06,360
Obviously refreshing in this way, nothing changes in the pay for the way it is structured.

31
00:04:06,380 --> 00:04:12,790
Therefore, let's start first, giving it a static position to display it correctly.

32
00:04:12,800 --> 00:04:21,520
Let's delete, talk and let's add to overflow also an indication in terms of height of that paragraph.

33
00:04:21,710 --> 00:04:24,440
So let's opt for 60 pixels.

34
00:04:24,650 --> 00:04:28,610
Let's save refresh and go back to our page.

35
00:04:29,240 --> 00:04:34,280
As you see, this new section in this moment has been cut.

36
00:04:35,590 --> 00:04:42,140
And with that overflow hidden, the rest of the content does not appear.

37
00:04:42,430 --> 00:04:52,840
For example, if we inserted visible as an indication for our overflow by refreshing, we would see

38
00:04:52,840 --> 00:05:02,380
that the text, which hadn't been considered by the previous overflow as reviewed, now appears and

39
00:05:02,410 --> 00:05:04,720
overlaps the following tag.

40
00:05:07,780 --> 00:05:17,320
Because the established height for this paragraph is 60 pixels and the last part of the contained text

41
00:05:17,320 --> 00:05:18,970
goes over it.

42
00:05:20,580 --> 00:05:28,830
If we want to make this tax properly, show inside a page with a tag which has got a predefine high

43
00:05:28,830 --> 00:05:31,500
value, we might use scroll.

44
00:05:33,100 --> 00:05:42,580
Or better, we might allow our paragraph to scroll so that it can appear completely in the dedicated

45
00:05:42,580 --> 00:05:43,390
space.

46
00:05:46,020 --> 00:05:55,710
So as you can see, both the sad index and overflow will turn out to be very useful in developing a

47
00:05:55,710 --> 00:06:01,670
website when containing various contents, overlapping one to the other.

48
00:06:02,650 --> 00:06:11,030
When they're supposed to appear in narrow spaces due to this specific device or due to the possibility

49
00:06:11,030 --> 00:06:18,920
present in the page, according to the type of website in progress or else according to the requests

50
00:06:18,920 --> 00:06:23,330
of the customer asking you for specific work.