Chapter 10: Positioning Elements

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

This is the textbook version of Lesson 10 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners

← Chapter 9: Box Model Dimensions

← Table of Contents

Overview

This lesson covers the following HTML tags, CSS properties, and JavaScript commands for the first time:

HTML

None.

CSS

1. position
2. top
3. left
4. right
5. bottom
6. inset

JS

1. document.querySelector(“img”).offsetTop
2. document.querySelector(“img”).offsetLeft
3. document.querySelector(“header”).scrollTop
4. document.querySelector(“header”).scrollLeft

This lesson begins with this Codepen. Code along with me to increase retention!

Lecture

Per CSS, we can position our elements in a few different ways.