Pozycjonowanie elementów.

Pozycjonowanie elementów.

Do formatowania ustawienia elementów na stronie są stworzone właściwości css:
  • width - szerokość elementu,
  • hight - wysokość elementu,
  • position - przesuwanie w dowolne miejsce ekranu,
  • min-width, max-width - ustawianie minimalnej i maksymalnej szerokości elementu,
  • min-height, max-height - ustawianie minimalnej i maksymalnej wysokości elementu,
  • overflow - ustawianie wyświetlania i ukrywania zawartości pudełka,
  • overflow-clip - ustawianie obszaru, po przekroczeniu którego następuje obcięcie tekstu,
  • clip - ustawianie parametry obcięcia tekstu,
  • visibility - wyświetla lub ukrywa dany element,
  • display - określa sposoby wyświetlania bloków i elementów. Wartość display:block blokuje np. rozmiary tabeli na podana wysokość i szerokość,
  • z-index - określa kolejność przy nakładaniu się elementów.
Efekt działania tych deklaracji najlepiej zobaczyć na poniższych przykładach. Ze względu na pokazanie efektu działania, kody nie sa ujęte w tabele. Liczby są tak dobrane, aby nie zasłaniały napisów.





Przykład-1 Przykład-2 Przykład-3 Przykład-4
musi być dużo tekstu. Przykład-5 Przykład-6 Przykład-7
musi być dużo tekstu.

Kod w head.

.przyklad1 {position:absolute;top:470px;left:200px;z-index:1;background-color:yellow;
      width:100px;height:80px;}
.przyklad2 {position:absolute;top:490px;left:250px;z-index:2;background-color:orange;
      width:100px;height:80px;}
.przyklad3 {position:absolute;top:520px;left:160px;z-index:3;background-color:brown;
      width:100px;height:80px;}
.przyklad4 {position:fixed;top:470px;left:480px;z-index:4;background-color:silver;
      width:100px;height:80px;overflow:scroll;}
.przyklad5 {position:relative;z-index:5;background-color:gray;
      width:100px;height:80px;}
.przyklad6 {position:static;z-index:6;background-color:green;
      width:100px;height:80px;}
.przyklad7 {position:relative;overflow:hidden;z-index:7;background-color:red;
      width:100px;height:80px;}

Kod w body.

<span class="przyklad1">Przykład-1</span>
<span class="przyklad2">Przykład-2</span>
<span class="przyklad3">Przykład-3</span>
<span class="przyklad4">Przykład-4 musi być dużo tekstu.</span>
<span class="przyklad5">Przykład-5</span>
<span class="przyklad6">Przykład-6</span>
<span class="przyklad7">Przykład-7 musi być dużo tekstu.</span>

Position:absolute pozwala nam na zakrywanie zdjęcia np. monitem treści "Zmieniono hasło". Można także w bloku treści napisu umieścic ten selektor i taki napis można nałozyć na zdjęcie wstawione w sposób klasyczny, czyli <src img... . Przykładowy kod:
<body>
<img src="tlo.png" alt="tlo.png">
<div style="position:absolute;top:10px;margin-left:30px;width:600px;'>
Zapraszam do mojego serwisu.
..........
</div>
</body>















do góry   menu    naprzód    powrót