Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Relative Positioning Explained | Mastering CSS Positioning
Advanced CSS Techniques

book
Relative Positioning Explained

Relative positioning allows us to position an element visually relative to its original positioning. At the same time, the neighboring elements do not take the element's place.

css
position: relative;

We can use the properties of top, left, bottom, and right to indicate the visual displacement of an element with respect to its initial position. The values can be positive and negative in different units (px, %, etc.). Let's run the following example to see what effect we can get:

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eos
et maxime officiis, molestiae autem ea corporis unde quibusdam nihil
ipsam facere corrupti, inventore voluptate consequatur laboriosam optio
magnam odio.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eos
et maxime officiis, molestiae autem ea corporis unde quibusdam nihil
ipsam facere corrupti, inventore voluptate consequatur laboriosam optio
magnam odio.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eos
et maxime officiis, molestiae autem ea corporis unde quibusdam nihil
ipsam facere corrupti, inventore voluptate consequatur laboriosam optio
magnam odio.
</div>
</div>
</body>
</html>

Note

It is essential to mention that there is no need to specify all top, bottom, left, and right properties for the element with the position value that differs from the static. It is enough to set one property for the vertical positioning (top or bottom) and one for the horizontal positioning (left or right).

question mark

What does the position: relative property do?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 2

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

We use cookies to make your experience better!
some-alt