Patryk Pawłowski

patryk.me

Podstawy Grafiki Interaktywnej

ASP Gdańsk

Pozycjonowanie absolutne

Stan wyjściowy

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4 large-offset-2">
    	    <p>Pewna żaba była słaba,<br>
    	    Więc przychodzi do doktora<br>
    	    I powiada, że jest chora.<br>
    	    Doktor włożył okulary,<br>
    	    Bo już był cokolwiek stary.</p>
        </div>
      
      	<div class="cell large-3 large-offset-1">
            <img src="./img/zaba.png">
        </div>
    </div>
</div>

Pewna żaba była słaba,
Więc przychodzi do doktora
I powiada, że jest chora.
Doktor włożył okulary,
Bo już był cokolwiek stary.

Pozycjonowanie żaby

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4 large-offset-2">
    	    <p>Pewna żaba była słaba,<br>
    	    Więc przychodzi do doktora<br>
    	    I powiada, że jest chora.<br>
    	    Doktor włożył okulary,<br>
    	    Bo już był cokolwiek stary.</p>
        </div>
      
      	<div class="cell large-3 large-offset-1">
            <img class="zaba large-3" src="./img/zaba.png">
        </div>
    </div>
</div>

Pewna żaba była słaba,
Więc przychodzi do doktora
I powiada, że jest chora.
Doktor włożył okulary,
Bo już był cokolwiek stary.

.zaba {
  position: absolute;
  bottom: 0;
}

Pozycjonowanie żaby

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4 large-offset-2">
    	    <p>Pewna żaba była słaba,<br>
    	    Więc przychodzi do doktora<br>
    	    I powiada, że jest chora.<br>
    	    Doktor włożył okulary,<br>
    	    Bo już był cokolwiek stary.</p>
        </div>
      
      	<div class="cell large-3 large-offset-1">
            <img class="zaba large-3" src="./img/zaba.png">
        </div>
    </div>
</div>

Pewna żaba była słaba,
Więc przychodzi do doktora
I powiada, że jest chora.
Doktor włożył okulary,
Bo już był cokolwiek stary.

.zaba {
  position: absolute;
  bottom: 0;
  width: 200px;
}

Pozycjonowanie żaby

Patryk Pawłowski

ASP Gdańsk

<div class="grid-container">
    <div class="grid-x grid-margin-x">
    	<div class="cell large-4 large-offset-2">
    	    <p>Pewna żaba była słaba,<br>
    	    Więc przychodzi do doktora<br>
    	    I powiada, że jest chora.<br>
    	    Doktor włożył okulary,<br>
    	    Bo już był cokolwiek stary.</p>
        </div>
      
      	<div class="cell large-3 large-offset-1">
            <img class="zaba large-3" src="./img/zaba.png">
        </div>
    </div>
</div>

Pewna żaba była słaba,
Więc przychodzi do doktora
I powiada, że jest chora.
Doktor włożył okulary,
Bo już był cokolwiek stary.

.zaba {
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 200px;
}

Do poczytania

Patryk Pawłowski

ASP Gdańsk

ASP | Pozycjonowanie absolutne

By Patryk Pawłowski

ASP | Pozycjonowanie absolutne

ASP Gdańsk | Podstawy Grafiki Interaktywnej

  • 41

More from Patryk Pawłowski