El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem les diferents maneres de posicionar elements en una pàgina web utilitzant CSS. Aprendrem sobre els quatre tipus principals de posicionament: estàtic, relatiu, absolut i fix. Cada tipus de posicionament té les seves pròpies característiques i usos específics.

Posicionament Estàtic

Què és el Posicionament Estàtic?

El posicionament estàtic és el valor per defecte per a qualsevol element HTML. Els elements amb posicionament estàtic es col·loquen en el flux normal del document, seguint l'ordre en què apareixen en el codi HTML.

Exemple de Posicionament Estàtic

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionament Estàtic</title>
    <style>
        .static-box {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="static-box">Caixa 1</div>
    <div class="static-box">Caixa 2</div>
    <div class="static-box">Caixa 3</div>
</body>
</html>

En aquest exemple, les caixes es col·loquen una sota l'altra seguint l'ordre del codi HTML.

Posicionament Relatiu

Què és el Posicionament Relatiu?

El posicionament relatiu permet desplaçar un element respecte a la seva posició original en el flux del document. Això es fa utilitzant les propietats top, right, bottom i left.

Exemple de Posicionament Relatiu

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionament Relatiu</title>
    <style>
        .relative-box {
            position: relative;
            background-color: lightgreen;
            padding: 20px;
            margin: 10px;
            top: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div class="relative-box">Caixa 1</div>
    <div class="relative-box">Caixa 2</div>
    <div class="relative-box">Caixa 3</div>
</body>
</html>

En aquest exemple, cada caixa es desplaça 20 píxels cap avall i 30 píxels cap a la dreta respecte a la seva posició original.

Posicionament Absolut

Què és el Posicionament Absolut?

El posicionament absolut permet col·locar un element en una posició específica dins del seu contenidor més proper amb posicionament relatiu, absolut o fix. Si no hi ha cap contenidor amb posicionament, l'element es posiciona respecte a la finestra del navegador.

Exemple de Posicionament Absolut

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionament Absolut</title>
    <style>
        .container {
            position: relative;
            background-color: lightgray;
            padding: 50px;
        }
        .absolute-box {
            position: absolute;
            background-color: lightcoral;
            padding: 20px;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        Contenidor
        <div class="absolute-box">Caixa Absoluta</div>
    </div>
</body>
</html>

En aquest exemple, la caixa absoluta es col·loca 10 píxels des de la part superior i 10 píxels des de la part dreta del contenidor.

Posicionament Fix

Què és el Posicionament Fix?

El posicionament fix col·loca un element en una posició específica respecte a la finestra del navegador. L'element es manté en aquesta posició fins i tot quan es fa desplaçament a la pàgina.

Exemple de Posicionament Fix

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionament Fix</title>
    <style>
        .fixed-box {
            position: fixed;
            background-color: lightseagreen;
            padding: 20px;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="fixed-box">Caixa Fixa</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <!-- Afegeix més contingut per veure l'efecte del desplaçament -->
</body>
</html>

En aquest exemple, la caixa fixa es manté a la part superior dreta de la finestra del navegador fins i tot quan es desplaça la pàgina.

Exercicis Pràctics

Exercici 1: Posicionament Relatiu

Crea una pàgina HTML amb tres caixes. Utilitza el posicionament relatiu per desplaçar cada caixa a una posició diferent respecte a la seva posició original.

Exercici 2: Posicionament Absolut

Crea un contenidor amb posicionament relatiu i col·loca dues caixes dins d'aquest contenidor utilitzant el posicionament absolut. Col·loca una caixa a la part superior esquerra i l'altra a la part inferior dreta del contenidor.

Exercici 3: Posicionament Fix

Crea una pàgina HTML amb una capçalera fixa a la part superior de la finestra del navegador. Afegeix prou contingut a la pàgina per permetre el desplaçament i assegura't que la capçalera es mantingui fixa mentre es desplaça.

Solucions dels Exercicis

Solució de l'Exercici 1

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 1: Posicionament Relatiu</title>
    <style>
        .relative-box {
            position: relative;
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
        .box1 {
            top: 10px;
            left: 20px;
        }
        .box2 {
            top: 30px;
            left: 40px;
        }
        .box3 {
            top: 50px;
            left: 60px;
        }
    </style>
</head>
<body>
    <div class="relative-box box1">Caixa 1</div>
    <div class="relative-box box2">Caixa 2</div>
    <div class="relative-box box3">Caixa 3</div>
</body>
</html>

Solució de l'Exercici 2

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 2: Posicionament Absolut</title>
    <style>
        .container {
            position: relative;
            background-color: lightgray;
            padding: 50px;
        }
        .absolute-box {
            position: absolute;
            background-color: lightcoral;
            padding: 20px;
        }
        .box1 {
            top: 0;
            left: 0;
        }
        .box2 {
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        Contenidor
        <div class="absolute-box box1">Caixa 1</div>
        <div class="absolute-box box2">Caixa 2</div>
    </div>
</body>
</html>

Solució de l'Exercici 3

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 3: Posicionament Fix</title>
    <style>
        .fixed-header {
            position: fixed;
            background-color: lightseagreen;
            padding: 20px;
            width: 100%;
            top: 0;
            left: 0;
        }
        .content {
            margin-top: 80px; /* Afegeix marge per evitar que el contingut es superposi amb la capçalera fixa */
        }
    </style>
</head>
<body>
    <div class="fixed-header">Capçalera Fixa</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <!-- Afegeix més contingut per veure l'efecte del desplaçament -->
    </div>
</body>
</html>

Conclusió

En aquesta secció, hem après sobre els diferents tipus de posicionament en CSS: estàtic, relatiu, absolut i fix. Hem vist exemples pràctics de com utilitzar cada tipus de posicionament i hem practicat amb exercicis per reforçar els conceptes apresos. Amb aquests coneixements, estàs preparat per crear dissenys més complexos i controlats en les teves pàgines web.

Posicionament Estàtic, Relatiu, Absolut i Fix