Pozycjonowanie

Widzialność

selektor { visibility: typ }

Polecenie to steruje wyświetlaniem elementu na ekranie. Pozwala ukryć dowolny element, a w jego miejsce wprowadzić pustą przestrzeń o takich samych rozmiarach, jakie miałby element, gdyby tylko był widoczny.

Polecenie "visibility: hidden" jest zbliżone do display: none. Różnica polega na tym, że drugie z nich całkowicie usuwa element z ekranu, natomiast pierwsze tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce.

UWAGA! MSIE 7.0 nie obsługuje wartości collapse (w MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance).

W przypadku zastosowania "visibility: collapse" dla elementów tabeli, Opera 10.10, Chrome i Konqueror usuwają co prawda tak oznaczone elementy, ale pozostawiają po nich pustą przestrzeń. Opera 10.50, Firefox i MSIE 8.0 w takim przypadku usuwają całą wolną przestrzeń. W założeniu ma to być przydatne do realizacji wszelkiego rodzaju dynamicznych efektów ukrywania fragmentów tabeli (np. za pomocą JavaScript) - eliminuje "przeskakiwanie" komórek powodowane zmianą rozplanowania tabeli przy ich tradycyjnym usuwaniu.

Przykład:

visibility: visible visibility: visible


visibility: hidden visibility: hidden
(obrazek jest niewidzialny - na ekranie pozostała pusta przestrzeń o rozmiarach takich jak ukryty obrazek)


Dla porównania:
display: none display: none
(obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń)

Dla drugiego wiersza visibility: collapse

komórka1	komórka2
komórka3	komórka4 - o szerszej zawartości
komórka5	komórka6

...i to samo przy sterowaniu wyświetlaniem:

Dla drugiego wiersza display: none

komórka1	komórka2
komórka3	komórka4 - o szerszej zawartości
komórka5	komórka6

Dla drugiego wiersza visibility: hidden

komórka1	komórka2
komórka3	komórka4 - o szerszej zawartości
komórka5	komórka6

Dla porównania ta sama tabela bez zmiany widzialności:

komórka1	komórka2
komórka3	komórka4 - o szerszej zawartości
komórka5	komórka6

Zwróć uwagę na różnice pomiędzy działaniem "visibility: collapse" a "display: none". W pierwszym przypadku, mimo iż wiersz z szerszą komórką został ukryty, kolumna w której się znajdowała nie zmniejszyła swojej szerokości. W drugim przypadku rozplanowanie tabeli zostało wyznaczone na nowo, dlatego stała się ona węższa, gdyż dopasowała się do zawartości tylko widzialnych komórek. Podkreślenia wymaga również fakt, że przykładowa tabela z "visibility: collapse" nie powinna wyglądać tak samo jak "visibility: hidden" - jeżeli wyglądają identycznie, to znaczy że Twoja przeglądarka nieprawidłowo interpretuje to polecenie.

visibility: collapse na innym elemencie (obrazek z przykładu na samym początku) - zachowanie powinno być identyczne, jak dla "visibility: hidden":

visibility: collapse visibility: collapse

• Obcinanie
• Wyświetlanie

• Do góry
• Strona główna
• Drukuj rozdział