Position Absolute in Webflow

All right guys.

Next stop, we are gonna add a couple
of the other assets that we have created.

The left hand and the right hand, the
scrolling icon and some of the brand

icons or brand logos that we have in the
very footer.

Let me actually toggle off the grid so
we can see them clearly, and I can start

adding all the images that I need into
the actual canvas.

As soon as I do that, we are gonna
start seeing all the assets added now

into my library.

Let's go ahead and just replace,
make sure that I replace this

with the image, this is a really big
image so, what we wanna do is just

duplicate this 2, make sure that they are
the correct order.

And what's happening, everything
is being push down but everything

is being push down because of course this
is using a 100vh and it's not gonna go

past that, everything else gets hidden
above it, so if I were to toggle this off

then it just go back to the auto, so
whatever elements that are inside

it will expand down.
But then everything else of course

all the other sections are no longer
expanded 100%.

But that's ok so like for example these
2 hands we want them to be actually

floating on top of our boxes, but in order
for us to do that, we need to change their

box behavior so they're no longer position
in a static way, similar to how all the other

boxes are stacking one next to each other
or above each other.

The way we do this is by, we establish the
class name on each of these hands

so I'm gonna call these vr-hands, I am gonna
call this class vr-hand.

And we are gonna do that same thing
with this one vr-hand, what is the

properties that this 2 will share? well we
are gonna change their position to become

an absolute element by utilizing the
position absolute we are now no longer

viewing these elements on the X and Y
but now they are on the Z index.

You would have Z index going positive
numbers and Z index negative numbers

so ain't no matter how I organize these,
these elements that now are on the Z index

they won't be affected by the stacking of
the box model.

They are now on their own, they are
now floating above the box model.

So I'm gonna go back here to my
reference of Figma and I know their

sizing here is about 130px...

so let me just scale this down...
so 130, making sure both of them

are the same, and we can toggle back
on the section with the vh so 100vh height

on the section, just so that we can see
that being expanded to 100%.

Next, because we have identified this
as position, we've change the values to

an absolute position, we can decide where
we want to align these hands based on

the route of this document or in this
case the body, if we wanted to align

for example these hands relative to
the actual container or to the section

we would then need to create each of
this sections position to become relative

the best way to explain this is if I move
this 2 hands over into the container

like that, and let's say I wanted to align
these hands to the top of this container

I would have to change the position of
this container to become relative

so the actual position of these hands
would always be relative to whatever

it's contain to, so because we have 2
different hands but they both share

the same properties here of the
position I wanna make sure I select

the right hand and add a combo class
so I can say this is going to be the

right hand, and I can change the
property of that one...

ops actually I selected the wrong
one...

so let me just change this and select
this one, and just add the class name

right hand and notice now that the
right hand combo class has the

position over to the right and now
they are position relative to the

container but if I remove container
from being the relative and just remove

or reset this, then those hands are going
to be align to the root or relative to the

body. So this is exactly what we want,
If I stretch this and I preview this

our hands are now completely align to the
top right and the top left, and I wanna

make sure I align actually this one
to the bottom and this one to the

bottom right.
Just like that.

Ok

So that's the main difference between
position relative and position absolute

that we are now utilizing the Z index
to align and position our elements

above our box model, if I started to
play around with the combo class

with the 50% I can see the hand moving
in and out from, moving on top and

overlaid on top of all the other elements
and I were to do the same with the

other hand what would happens is,
I could start changing the values of

the left hand.

We don't want to have the VR hands
start changing some of the original

values of the percentage and position
because that same class is being used

on the right hand, so instead what we
wanna do is we wanna make sure that

we have reset kind of our styles here
so that we don't have really any position

establish for the vr-hand like so...
We only want the position absolute

to be establish on the vr-hand.

But we are gonna create a combo class
called left hand and then this one we

can start playing with the actual position
so, something like this. Right.

But because we are using percentages
that's gonna change based on the

percentage and how wide your browser
is, so right now if the browser window

was a bit smaller like for iPads, then
this would be 60% to the left and this

would be 60% to the right and this is
not useful because we want this...

if this gets really really really wide then
the hand will probably not stay in the

middle, it won't stay near the actual
title.

What I wanna do is make sure that these
hands align and stay near the center of

the screen, so the way I like to do it
is with using percentage.

I'm gonna change the left hand to
be at 50% and I'm going to change

the value to a negative pixel value
until it reaches the point that I want it

to start, so right about there let's say
maybe -400px from the 50% where it

starts, go out negative 400px and I'll
do the same thing with the right hand

I wanna place that 50% to the middle
and from the middle I wanted to place

margin right -400.

So now no matter how large
the device or the window it gets

those elements or those floating
hands will always remain in the middle

no matter what, because it's actually
defined by the 50% and I'm offsetting

it using the margin properties.

All right let's just adjust a little bit
so on the right hand I want the botton

to be just a little bit hidden maybe
like 5%

same here 5% to the bottom

and it's starting to match our design.

Great, we can do the same thing over
with our scroll icons and our logos

let's take a look at that.

What I want to do is add those
icons or those brands on the footer

to match our Figma document, in
Figma we have the Vive the Oculus

and the PS4 logo and I've already
uploaded them into my assets so

the first thing I'm gonna do is go
back to my section and I'm going

to add a div block which is just an
empty block similar to what a container

or a section does except that these 2
you can't have them nested within each

other, as opposed to the div block you
can have div block inside a div block

and then another div block, so in
this div block that I've just created

it's position to be static so it's adapting
to, it's pushing all the elements around

up and down and I'm just going to start
adding the images that I pulled over here.

And I can copy and paste, change the value
to different logo, and just like that

change it to this value.

Now, I'm gonna call this div block "brands"
and this brands div block I'm going to make

it a flex, I'm gonna make this a layout
of the type of flex similar to how we did

the section, we are gonna make it
horizontal and we are gonna make sure

that everything we align it, all the
elements are align to the center and

justify to the center as well.

And what I wanna do is expand this
to 100%, so notice now this brands

is actually expanding all the way to the
root of the document, of the body

and I wanna place them to the bottom of
this kind of section right.

So in order for me to align them to the
bottom of the section, I have to use the

Z index and for that I need to change
this position to an absolute and change

the value of the bottom to 0 and boom...
right away I get that fixed to the very bottom.

Ok that looks pretty good.

Cool, now I can just simply change some
of the values here, maybe I want this

to be 15px away from the bottom,
so it's not completely touching the

edge and what I also want to do is
make each individual one of these...

each one of these have some spacing
between each other, so let's just create

a class for each one of these, I'm gonna
call this tiny brand logo, the properties

are going to be... so I go to spacing
and I say: I want these to be both

about 20px between each other, and
I also wanna change the effect so that

the opacity matches the one over here
in our Figma.

So the opacity that I have here is about
20% so we wanna change those opacity

levels to 20% and boom...
Now we just need to copy and paste

that class over to each one of these.

And just like that we created a nice
set of logos using the properties from

Figma and they are all nicely align thanks
to the flex layout that we have on the

brands and they are fixed on position
absolute so everything is on top of

every element and it's not pushing away
and affecting the content in the middle

which I wanted to be completely centered
using flex as well.

All right now, to finish off there is
2 ways we can do this extra section

here of adding a nice gradient texture
like we did on Figma, we can export this

whole section, this part of the design.
Export that out and then I can import it

over here as a background image.

So, remember we created a class called
"Bold text" so that we can make this a

block element, I'm going to change this
vod-tittle or gradient maybe, yeah

gradient makes sense, ok and the gradient
we are gonna replace this text with a

background image so I can go in here
and choose the image, I have already

exported this as an image "Video on
Demand" I can change some of the

settings so is no longer a tile instead
it's covering, so it covers or expands.

But right now we can't really see it
because the text is of course going

to always gonna be on top of whatever
is in the box, so that's actually being

shown in the back, how can we hide
this text in front of it?

A simple solution is, if you click
on typography and the you go

to more type settings, you're gonna
see something called text indentation

of course text indentation works just
like any Word document where you

put 15px and starts indenting the text
however you like.

But there's a simple hack that it's been
used for so many years a long time

in CSS was that they would hide text
by simply changing this to -999em

and so what would happen is, all
those text blocks, all those little

characters would then disappear
because it's going in negative space

so, but then what would happen is
this little vod-gradient does not have

a size to kind of use as a reference
and we can simply change or look

for the size over here, so it's about
675px the image that we just exported

so we can actually change the size of
these, so 675px and there we go.

This is one way to to this but it's not
the best way to do it because it's not

SEO friendly, what I mean by that is that
google spiders actually crawl the content

and they'll notice that you are using this
hack to hide this text and won't be as

important for them, they will notice
right away and they won't considere that

tittle which is a very important tittle
it's an H1 and star indexing the way

we want it on Google.

So, a way to fix this is instead of
using the text indent and the width

we can actually do this clipping
an image as a background.

So let's take a look at this option.

I'm going to change the settings
here I'm going to reset the width

reset the text indent and I'm just
gonna remove this background

and instead what I did is I exported
the mask image, the mask gradient

on it's own, so you can see that mask
gradient, that exact same square mask

is what I exported and I'm gonna bring
it in as a background image and I'm going

to have that image not tile but I want it
to cover so it nicely to the top and now

what I want to do is without affecting
the actual text so that's it's readable

through Google is instead use this
little option called clipping and if

I click on clipping I just have to select
clip the background that I just added

over to the text that's in front, which
is really cool, just like that we created

that mask utilizing a gradient, a texture
gradient.

But the problem is that sometimes
fonts don't behave the best way,

you can see right here a little bit
of that font is being clipped and

it's not your fault and it's probably
just the way the font was build,

it creates a little bit of a clipping
on the left, a simple way to fix

that is by adding some padding,
so we can have that left padding

space out, so we bring that V that
is being clipped.

So let's go ahead and do that
and it's just very subtle it's maybe

just 10px and that's it, we've created
a beautiful homepage intro with

both the section, the container, and
we've added some really cool effects

like adding clipping to a text field,
we've added position elements to

the Z index so they are floating
above each other and we've align

this using of course the grid system,
the overlay grid system that comes

with Webflow so that it matches our
design on Figma.

This is exciting guys, let's jump
into our next lesson so we can start

building out the top navigation bar.