Moving Elements Around the Page
November 30, 2017
In this lesson, you’ll learn:
- What parents, children, and siblings are in HTML
- How to give elements relative, absolute and fixed position
- How to place elements anywhere on the page
Parents, Children, and Siblings
Web developers use the terms parent, child, and sibling to describe the relationship between HTML elements.
Any element that contains another element is a parent of what it contains. All elements inside another element are the child of the element. Elements that are next to each other and share the same parent are siblings.
For example, look the following HTML code:
<div>
<p>
Here's some text. And here's a <a href="google.com">link</a>.
</p>
<p>
Here's some more text. And here's another <a href="google.com">link</a>.
</p>
<p>
Here's another paragraph with no link.
</p>
</div>In this case, the div is a parent of all paragraphs and both links. It’s a direct parent of the paragraphs because they’re directly inside of the div.
Each link is a child of the paragraph that contains it. The links are also children of the div.
Each paragraph is a child of the div.
The paragraphs are siblings, because they are next to each other and share the same parent.
The links are not siblings, because they have different direct parents.
This will come in handy as you learn about positioning elements.
Positioning Elements
In this section, you’ll learn how to move an HTML element to a specific location on the page.
For example, you can move a link 10 pixels from the top border of the page and 10 pixels from the left border of the page. This gives you more control than simply using floats or inline-block.
Each HTML element has a property called position and a default value of static. This means that the element shows up where it’s written in the HTML and scrolls along with the document.
If you change the position property, you can unlock more tools to position the element wherever you’d like.
Relative Positioning
The first type of positioning is relative positioning. This is unlocked when you set the position property to relative.
.relative-position {
position: relative;
}A relatively-positioned element can be moved as far as you’d like away from its original position. You can use the properties top, right, bottom, and left to specify how far you’d like to move the element. (Remember, the starting point is its original position.)
For example, to move the element 20px up and 30px to the right, you would write:
.relative-position {
position: relative;
top: 20px;
right: 30px;
}If you try this, you will notice that the original space where the HTML element was located is still there. With relative position, the document behaves as if the element is still where it used to be, though it displays the element somewhere else.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
color: #fff;
}
header {
background-color: #f1c40f;
box-sizing: border-box;
margin-bottom: 10px;
padding: 10px;
}
.main-content {
margin-bottom: 10px;
}
main {
display: inline-block;
width: 70%;
background-color: #2ecc71;
box-sizing: border-box;
padding: 10px;
}
.relative-position {
position: relative;
top: 20px;
right: 30px;
}
aside {
display: inline-block;
width: 30%;
background-color: #9b59b6;
box-sizing: border-box;
padding: 10px;
}
footer {
background-color: #f39c12;
box-sizing: border-box;
padding: 10px;
}
</style>
</head>
<body>
<header>My Site</header>
<div class="main-content">
<main class="relative-position">
This is for my main content. This is for my main content. This is for my main content. This is for my main content.
</main><!--
--><aside>
Welcome to my blog! This is my sidebar.
</aside>
</div>
<footer>Copyright Commonlounge. All Rights Reserved.</footer>
</body>
</html>
The example from the previous lesson. The main element has been moved using relative position. Notice that the space it takes up is still occupied.
Absolute Positioning
The second type of positioning is called absolute positioning. This is unlocked when you set the position property to absolute.
.absolute-position {
position: absolute;
}An absolutely-positioned element can be positioned anywhere in relation to its closest parent with non-static position. What does that mean?
Since all HTML elements are static by default, an absolutely positioned element will (by default) be positioned relative to the entire page (the body element).
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.absolute-position {
position: absolute;
top: 100px;
right: 100px;
padding: 10px;
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="absolute-position"></div>
</body>
</html>Result:
By default this element will be located 100px from the top of the body (the top of the screen), and 100px from the right side of the body (the right side of the screen). You can do the same thing with the left and bottom properties.
However, if this element is inside another box with either relative or absolute position, it will be positioned relative to its parent instead.
Let’s look at an example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.relative-parent {
position: relative;
background-color: #2ecc71;
height: 100px;
padding: 10px;
}
.absolute-position {
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="relative-parent">
This is the parent.
<div class="absolute-position">
This is the child.
</div>
</div>
</body>
</html>Result:
Notice that the parent hasn’t moved anywhere even though it has relative position. That’s because the top, right, bottom, and left values haven’t been changed.
In this case, the element only gets a relative position so we can position the child element in relation to the parent.
Fixed Position
The third type of positioning is called fixed positioning. This is unlocked by setting the position property to fixed.
.fixed-position {
position: fixed;
}A fixed-position element is placed in relation to the edges of your screen. Look at the following example:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fixed-position {
position: fixed;
right: 30px;
bottom: 30px;
padding: 10px;
background-color: #e74c3c;
color: #fff;
}
</style>
</head>
<body>
<div class="fixed-position">
I’m fixed!
</div>
</body>
</html>Result:
This element will be positioned at the bottom-right side of the screen. It will stay “fixed” in the bottom of your screen as you scroll. This type of positioning is really handy for a link or image that you want to keep visible as you scroll down the page.
Using Negative Values
You can also use negative values to move elements with relative, absolute, or fixed position. Let’s see the absolute-positioned element from the previous example, this time with negative values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.relative-parent {
position: relative;
background-color: #2ecc71;
height: 100px;
padding: 10px;
}
.absolute-position {
position: absolute;
right: -10px;
bottom: -10px;
padding: 10px;
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="relative-parent">
This is the parent.
<div class="absolute-position">
This is the child.
</div>
</div>
</body>
</html>
Instead of being positioned 10 pixels inside of the right and bottom sides of the element, it’s positioned 10 pixels away from the right and bottom sides (going in the opposite direction).
Using Percents
You can also use percentages to position elements. Let’s look at another example with the absolute-positioned element from earlier.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.relative-parent {
position: relative;
background-color: #2ecc71;
height: 100px;
padding: 10px;
}
.absolute-position {
position: absolute;
top: 50%;
padding: 10px;
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="relative-parent">
This is the parent.
<div class="absolute-position">
This is the child.
</div>
</div>
</body>
</html>Result:
The top of the element is positioned exactly 50% of the height of its parent element.
If you want the box to be perfectly positioned at the very bottom of the element, use a top value of 100%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.relative-parent {
position: relative;
background-color: #2ecc71;
height: 100px;
padding: 10px;
}
.absolute-position {
position: absolute;
top: 100%;
padding: 10px;
background-color: #f39c12;
}
</style>
</head>
<body>
<div class="relative-parent">
This is the parent.
<div class="absolute-position">
This is the child.
</div>
</div>
</body>
</html>
Now you can fine-tune where you’d like to position elements on the page. Go to the next lesson to learn how to style text.
Summary
In this lesson, you learned:
- What parents, children, and siblings are in HTML
- How to give elements relative, absolute and fixed position, and what do they mean.
- How to place elements anywhere on the page