Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Positioning HTML Elements using CSS

    Tyler ClarkTyler Clark
    cssCSS

    Elements flow along the page depending on their display values, however we can customize them to be placed literally anywhere. We can position elements absolute or relative to a certain location, as well as fixed to the top of a page.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Inside of our HTML, I've added two divs here, with the class of parent and the inner div class of child. Let's give the parent class a padding of 20 pixels and a border of two pixels in blue. Now, we'll give the child a padding of 20 pixels and background of red. With that saved, we'll see it appear here at the top of the page.

    Now, back inside of our child class, let's give it a position of relative and a top of 20 pixels. We'll see with a refresh that our child box has now moved to the bottom of our parent class. We'll see that inside of our dev tools as well.

    The position property can help us manipulate the location of an element. When we use relative as the value, it's going to keep the element's original position in the flow of the document, which gives us the ability to use left, right, top, bottom, and z index.

    It's just going to nudge the element from its original position. Now, if we change this to absolute, we'll see that we can still move the element in any direction, but it's broken on the flow of the page. As we see, our parent div is smaller now, because it's not taking into effect the child's padding.

    Absolute positioning will change depending on which of its parent elements is positioned relative. Right now, it's positioned to the very top-level HTML element. As we add position relative to the parent class, we'll watch our red child box here move down. As it adjusts, it's 20 pixels from the top, but now, according to this parent class.

    Similar to absolute is the fixed value. However, fixed elements are always relative to the document, and not any parent element. Also, scrolling does not affect it, either. This is handy when working with navigations that stay at the top of a website.