In the previous lesson, we discussed position and now to a web developer, often using the excess,
mentioning Z index and overflow comes surely as natural position, in fact, above all, in the absolute
attribute which we are inserting straight away, as we have seen, associating to top a single value
for age two, which is inserted twice in within the sheet, makes Section one and Section two overlap
in order to avoid this type of overlapping.
We are going to insert into the age TMA five five new classes associated to the age two so that they
can get inserted in the stylesheet.
We will call them head or one and head to.
And so doing one saved and once the styles have been added to our sheet.
OK, had a one.
And head to.
We can assess with our Z index which header should appear first in this moment, Section two is overlapping
Section one.
And that means it is just overate.
If we inserted within had one that index on to and within header to.
Z index on one by saving and refreshing, we would see that by selecting Section one now appears before
the other header, so that index has the aim of prioritizing one specific selector.
To make it in case of overlapping inside the page appear before or after the following, and this numeric
representation will enable us to insert different levels of depth, which, by showing a greater number,
would be displayed above the others.
In this case, two overlaps, one, and in case of the where a third header with that index fixed at
three, the same would overlap both after the different levels of depth.
Let's move now to the overflow topic.
Therefore, for example, referring to a paragraph when the content of it gets limited by a limited
defined by the height inserted as property in the reference selector.
Therefore, if we go to age five inside the first paragraph, we insert a class which we are naming
with one as a reference to overflow one by getting back to our file and adding of one to the stylesheet.
We can insert overflow hadyn.
Within it.
Obviously refreshing in this way, nothing changes in the pay for the way it is structured.
Therefore, let's start first, giving it a static position to display it correctly.
Let's delete, talk and let's add to overflow also an indication in terms of height of that paragraph.
So let's opt for 60 pixels.
Let's save refresh and go back to our page.
As you see, this new section in this moment has been cut.
And with that overflow hidden, the rest of the content does not appear.
For example, if we inserted visible as an indication for our overflow by refreshing, we would see
that the text, which hadn't been considered by the previous overflow as reviewed, now appears and
overlaps the following tag.
Because the established height for this paragraph is 60 pixels and the last part of the contained text
goes over it.
If we want to make this tax properly, show inside a page with a tag which has got a predefine high
value, we might use scroll.
Or better, we might allow our paragraph to scroll so that it can appear completely in the dedicated
space.
So as you can see, both the sad index and overflow will turn out to be very useful in developing a
website when containing various contents, overlapping one to the other.
When they're supposed to appear in narrow spaces due to this specific device or due to the possibility
present in the page, according to the type of website in progress or else according to the requests
of the customer asking you for specific work.