- [Chris] Hi, this is Chris Convers, and in this episode,
we'll be taking a look at the position property
and how this allows us to change the relationship
between HTML elements on our page.
Now by default, HTML elements flow in the browser
in the same order they appear in the HTML file,
and elements flow after and around each other
throughout the document.
The position property allows us to place elements
with pixel-level precision anywhere
within the HTML document.
Now you can take control over which HTML elements
control our positioned elements by assigning
positioning properties to that element's parent.
So if you'd like to follow along with me,
download the exercise files and let's start by opening
the index.html file in the text editor.
So here in the HTML file, you'll see that we have
a partial layout set up.
In addition to opening this in the text editor,
you can also open index.html up in a browser.
My text editor has a built-in preview
so I'll use that.
And in the browser you'll see we have a little bit
of content, a few headings, and a promotional area
down here.
Now the main elements we'll be concerned with
will be the article element, the aside element
that's inside of the article element,
and an image element which is inside of the aside element,
which is also inside of the article element.
So in our HTML file, if we scroll down,
we can see the article element here.
Here's our aside, and inside of the aside
which is this blue container here, we have an image
pointing to a file called plane.svg, which is this
little airplane symbol here with this little swish.
We have our H3 and a paragraph element,
and then down here is an anchor tag.
So what we're going to do now is open up the CSS file
and we're going to begin to position this airplane graphic.
So let's go back to the exercise files,
let's find styles.css inside of the assets folder,
let's open this in our text editor,
let's scroll down and let's find the rule that I've placed
in here called aside space img.
So we're going to target that image element
that's inside of the aside element.
So inside here let's add a position property.
So I'll add a position and then we'll set the value
to absolute.
Now once we do that, you'll see that the airplane
stays in exactly the same position, however the contents
are now flowing up underneath of that airplane graphic.
So what's happening here is we have absolute position
properties which removes the natural flow of this element
inside of the aside element, so now by default,
the positioning properties, the values of where
this is being placed, is being picked up from where
that content shows up in line, which means
the left-hand property and the top property
are exactly where they were before.
So now we're going to add a top and left property
to give this absolute position values.
So let's add a space, let's type in top colon space,
we'll set zero pixels and hit a semicolon.
Now as soon as we do that, you'll see that the airplane
graphic now will position based on the main body element.
What's happening here is each element
with absolute positioning will look to its immediate parent
to see if its parent element has any positioning properties.
If it doesn't, it will then look to that element's parent
and it will follow that pattern all the way through
the HTML document until it finds an item
with position properties, and if none of our elements
have position properties, it'll go all the way up
to the body element, which is why we're seeing
this at the top.
And so before we fix that problem, let's come in here
and set our left property as well.
So we'll set left to zero pixels, and now you'll see
that the airplane is positioning to the zero zero point
of the body element.
So now what we're going to do is let's scroll up
in the CSS, let's find our article element,
let's come in here and add a position property of relative.
So we'll add a position, add relative, then a semicolon.
And now we'll see that that airplane graphic is now
positioning in relation to the article element.
So position and relative tells the browser that
that particular object, this article element,
does not have any absolute positioning properties,
so it should still fall in the regular flow of the HTML,
however any elements inside the article element,
which include this image, should be positioned
in relation to this item.
So inside the article element, let's come in here,
let's copy position relative, let's scroll down
and find the aside, let's paste that property
into the aside as well, and now we'll see that the image
element is now positioning inside of the aside,
which is what I want.
I want to position the airplane and the link
in the lower right in relation to the aside element
to sort of create our promo area.
So now that this is positioned properly,
let's scroll back down, let's go back into the aside
space image, and let's change our properties.
So I mentioned we have pixel-level control.
So I want to have the airplane icon positioned
outside of the top and left areas of the aside.
So let's come in here to the top property,
let's set this to negative five pixels,
and now we can see that this item is actually showing up
outside of that aside.
Now the exact number that I need to align the graphic
is negative 10 pixels, and now let's go over
to the left property and set this to negative 12 pixels.
So now the airplane graphic is positioned exactly
where I want it, however the heading three is now
showing up underneath of this graphic.
Now in the HTML, the image tag is showing up before
the H3, and typically the browser will stack items
in the order that they show up in the HTML.
So the H3 should be in front of the airplane graphic,
but again since we gave this absolute position properties,
it's not paying attention to the natural flow.
So what we can do to fix this is we can come down to
the aside space H3 and let's add a position property
of relative to this as well.
And once we do that, you'll see that this text
now shows up over top of that image.
And so now let's go style the hyperlink.
So let's scroll down a little bit,
we have an aside space A, and with these properties here
we're styling this link to look like a button.
So after border radius, let's come down here
and add position, we'll set the value to absolute,
and this time instead of setting top and left properties,
we're going to set bottom and right properties.
So let's come in here and set bottom property.
We're going to set this to negative four pixels,
and then we're going to set a right property
to negative four pixels.
And so by setting bottom and right, we are now aligning
the bottom and right areas of that anchor tag
to the bottom and right areas of the aside.
So this is how we can pick the registration point
for how we're positioning the items.
So typically you'll either set top or bottom
and right or left when you position items.
So now that we have the layout working inside
of the aside element, let's position the entire aside
inside of the article.
So let's scroll up, let's find the aside,
let's come in here and change position relative
to absolute.
Next line let's set a top property, we'll set this
to 65 pixels, then a space, then we'll set a right
property of 25 pixels.
That's going to position the aside over here to the right.
Now in order to keep the text from overlapping this content,
let's come up here to the article element,
let's come in and change the padding right property
to 260 pixels.
So now If I was to come in here in resize the browser,
the text will never get within 260 pixels of
the right-hand side of the article, always giving us
room for the absolute positioned aside.
Now to quickly take a look at what fixed positioning will do
let's come down to the aside and let's change
the position from absolute to fixed.
So what this is going to do is make that positioned item
fixed to the browser window, even if we have content
to scroll.
So to demonstrate this, I'll come in here
and decrease the height of the browser,
and if I come in here and scroll, you'll notice that
the aside now sticks based on the browser's view port
instead of paying attention to any of the parent items
which have position properties.
And a lot of times you'll see fixed position being used
for things like navigation panels, social media links,
advertisements, newsletter signups, and sometimes
a web survey.
And they do this so that the content is always
showing up on the screen.
So let me increase my browser back to the full height here.
Let's come into the aside and let's set this back
to absolute.
And now to make sure that the layout will work on
small screens, let's come down here and add some rules
inside of the media query.
So at the bottom of the CSS, I set up a media query here,
with a maximum width of 540 pixels.
So let's come in here and reassign a couple properties.
So first let's start with our article.
So let's add an article selector.
Let's come in here and let's set padding right,
we're going to set that back to 25 pixels, let's save.
Next line, let's target the aside.
We're going to set the position back to relative
on the aside since we won't have room for that
to show in sort of a two-column view.
And we're going to set the top property back to auto,
which means pick up the values from where it would
normally fall in an HTML flow.
And we'll do the same thing for right.
Let's save our work.
I'll come over here and size the browser down,
and once we get under 540, we can see that the content
inside of the article now flows the full width
and the position properties have been removed
from the aside.
Now one final property I want to take a look at
is position static.
What position static does is basically the same thing
as assigning no position values.
However, if you have an item that already has
position values, we need a value to assign to that
in order to remove them.
And we don't have anything like position auto
instead the value's called position static.
So for example, if I want to take this anchor link here
and no longer have it positioned to the bottom and right,
what I could do inside of my media query is come in here
and assign a position static to that anchor tag.
So let's target the aside space A,
let's come in here and set position to static.
And now in the preview, we can see that that element
will now flow with the rest of the HTML elements
as if it had no position properties at all.
And with that, we've looked at examples of using each
of the different positioning properties available
to us in CSS.
Now if you'd like to learn more about positioning
techniques in conjunction with CSS pseudo-elements,
check out our course called "Creating a Pull Quote with CSS"
and if you want to dive deeper into creating advertisements
with HTML5, which rely heavily on CSS positioning,
check out chapter one of our course on
"Creating an HTML5 Banner Ad with GreenSock."
And so that concludes our brief look at CSS positioning,
and as always, thanks for watching.