CSS Layout- Using the position property

When you want to manipulate how elements behave and how they are positioned on a web page then the position property is used. The position property has five different values that can be used to manipulate elements, namely, the static, relative, absolute, fixed, and sticky. After selecting one of the five position values then an element can be positioned using the top, bottom, left, right and z-index properties.

Gregory Dehaney

The static value is default html element position which means elements are not affected by top, bottom, left, right and z-index properties.

Example 1 — Position: static

By default, the div elements are positioned as static. This means that fishbowl, goldfish1, goldfish2, and goldfish3 div elements automatically set to position: static.

<!DOCTYPE html>

<html>

<head>

<style>

.fishbowl {

border: 3px solid #187bcd;

background-color: #187bcd;

width: 10em;

height: 6em;

padding: 30px;

}

.goldfish1 {

border: 3px solid #fff299;

background-color: #fff299;

margin-bottom: 5px;

}

.goldfish2 {

border: 3px solid #fcdd00;

background-color: #fcdd00;

margin-bottom: 5px;

}

.goldfish3 {

border: 3px solid #dcc000;

background-color: #dcc000;

margin-bottom: 5px;

}

.outside {

height: 400px;

}

</style>

</head>

<body>

<h2>position: static</h2>

<strong>Fish Bowl </strong>

<div class=”fishbowl”>

<div class=”goldfish1"> Gold Fish 1 </div>

<div class=”goldfish2">Gold Fish 2 </div>

<div class=”goldfish3">Gold Fish 3 </div>

</div>

<div class=”outside”>

</div>

</body>

</html>

The relative value is used to change an element’s original position relative to where it would be in the normal document flow if positioned as static. However, now the top, bottom, left, right, z-index properties can affect an element unlike the static property.

Example 2 — position: relative

The div element goldfish1 is set to relative and the left property applied.

<!DOCTYPE html>

<html>

<head>

<style>

.fishbowl {

border: 3px solid #187bcd;

background-color: #187bcd;

width: 10em;

height: 6em;

padding: 30px;

}

.goldfish1 {

position: relative ;

left : 10px ;

border: 3px solid #fff299;

background-color: #fff299;

margin-bottom: 5px;

}

.goldfish2 {

border: 3px solid #fcdd00;

background-color: #fcdd00;

margin-bottom: 5px;

}

.goldfish3 {

border: 3px solid #dcc000;

background-color: #dcc000;

margin-bottom: 5px;

}

.outside {

height: 400px;

}

</style>

</head>

<body>

<h2>position: relative</h2>

<strong>Fish Bowl </strong>

<div class=”fishbowl”>

<div class=”goldfish1"> Gold Fish 1 </div>

<div class=”goldfish2">Gold Fish 2 </div>

<div class=”goldfish3">Gold Fish 3 </div>

</div>

<div class=”outside”>

</div>

</body>

</html>

The absolute value removed an element from the normal document flow and the other elements behave as if that element never exists and completely ignore the element.

Example 3.1 — position: absolute (static parent element)

In the example below, the element or div goldfish1 is inside a statically positioned div fishbowl which is the default position value. Since fishbowl, the parent container is set to static it will not allow an element to be relative or absolute to it. Therefore, when the div goldfish1 is set with the absolute value, it causes goldfish1 to be positioned relative to the whole page or the root <html> element. This means the div goldfish1 will be removed from the fishbowl.

<!DOCTYPE html>

<html>

<head>

<style>

.fishbowl {

border: 3px solid #187bcd;

background-color: #187bcd;

width: 10em;

height: 6em;

padding: 30px;

}

.goldfish1 {

position: absolute;

top: 0;

border: 3px solid #fff299;

background-color: #fff299;

margin-bottom: 5px;

}

.goldfish2 {

border: 3px solid #fcdd00;

background-color: #fcdd00;

margin-bottom: 5px;

}

.goldfish3 {

border: 3px solid #dcc000;

background-color: #dcc000;

margin-bottom: 5px;

}

.outside {

height: 400px;

}

</style>

</head>

<body>

<h2>position: absolute</h2>

<strong>Fish Bowl </strong>

<div class=”fishbowl”>

<div class=”goldfish1"> Gold Fish 1 </div>

<div class=”goldfish2">Gold Fish 2 </div>

<div class=”goldfish3">Gold Fish 3 </div>

</div>

<div class=”outside”>

</div>

</body>

</html>

Example 3.2 — position: absolute (relative parent element)

To position the element goldfish1 relative to the parent container fishbowl then the position value relative, absolute, fixed or sticky must be set. The value relative is commonly used.

<!DOCTYPE html>

<html>

<head>

<style>

.fishbowl {

position: relative;

border: 3px solid #187bcd;

background-color: #187bcd;

width: 10em;

height: 6em;

padding: 30px;

}

.goldfish1 {

position: absolute;

top: 0;

border: 3px solid #fff299;

background-color: #fff299;

margin-bottom: 5px;

}

.goldfish2 {

border: 3px solid #fcdd00;

background-color: #fcdd00;

margin-bottom: 5px;

}

.goldfish3 {

border: 3px solid #dcc000;

background-color: #dcc000;

margin-bottom: 5px;

}

.outside {

height: 400px;

}

</style>

</head>

<body>

<h2>position: absolute</h2>

<strong>Fish Bowl </strong>

<div class=”fishbowl”>

<div class=”goldfish1"> Gold Fish 1 </div>

<div class=”goldfish2">Gold Fish 2 </div>

<div class=”goldfish3">Gold Fish 3 </div>

</div>

<div class=”outside”>

</div>

</body>

</html>

The fixed value is used to position an element relative to the viewport, which means the element will stays in place even if the page is scrolled. The top, bottom, left, and right properties are used to position the element.

Example 4 — position: fixed

<!DOCTYPE html>

<html>

<head>

<style>

.fishbowl {

border: 3px solid #187bcd;

background-color: #187bcd;

width: 10em;

height: 6em;

padding: 30px;

}

.goldfish1 {

position: fixed;

top: 0;

right: 0;

border: 3px solid #fff299;

background-color: #fff299;

margin-bottom: 5px;

}

.goldfish2 {

border: 3px solid #fcdd00;

background-color: #fcdd00;

margin-bottom: 5px;

}

.goldfish3 {

border: 3px solid #dcc000;

background-color: #dcc000;

margin-bottom: 5px;

}

.outside {

height: 400px;

}

</style>

</head>

<body>

<h2>position: fixed</h2>

<strong>Fish Bowl </strong>

<div class=”fishbowl”>

<div class=”goldfish1"> Gold Fish 1 </div>

<div class=”goldfish2">Gold Fish 2 </div>

<div class=”goldfish3">Gold Fish 3 </div>

</div>

<div class=”outside”>

</div>

</body>

</html>

The sticky value positioned an element base on the user’s scroll position. The sticky element toggles between the position values relative and fixed depending on the scroll position.

Example 5 — position: sticky

<!DOCTYPE html>

<html>

<head>

<style>

.fishbowl {

border: 3px solid #187bcd;

background-color: #187bcd;

width: 10em;

height: 6em;

padding: 30px;

}

.goldfish1 {

position: sticky;

top: 0;

right: 0;

border: 3px solid #fff299;

background-color: #fff299;

margin-bottom: 5px;

}

.goldfish2 {

border: 3px solid #fcdd00;

background-color: #fcdd00;

margin-bottom: 5px;

}

.goldfish3 {

border: 3px solid #dcc000;

background-color: #dcc000;

margin-bottom: 5px;

}

.outside {

height: 400px;

}

</style>

</head>

<body>

<h2>position: sticky</h2>

<strong>Fish Bowl </strong>

<div class=”fishbowl”>

<div class=”goldfish1"> Gold Fish 1 </div>

<div class=”goldfish2">Gold Fish 2 </div>

<div class=”goldfish3">Gold Fish 3 </div>

</div>

<div class=”outside”>

</div>

</body>

</html>

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Gregory Dehaney
Gregory Dehaney

Written by Gregory Dehaney

Front-end Developer | Passionate about web

No responses yet

Write a response