DHTML0124

Umiejscawianie w CSS

Rysunek 7.7. Element został przesunięty w dól i w prawo. Abyś mógł lepiej zobaczyć. u^; co i gdzie jest przesuwane, wyświetlone zostały obramowania elementu

Użycie właściwości top i left przy umiejscawianiu

W rozdziale 6. dowiedziałeś się, jak określić wysokość i szerokość elementu. Jednak gdy położenie elementu zostanie zdefiniowane jako bezwzględne, to jego szerokość i wysokość będą się zachowywały w nieco inny sposób:

1. Jeśli właściwość width posiada wartość auto. to element będzie zajmował całą dostępną szerokość aż do prawej

krawędzi elementu ródzldelsklego.

2. Jeśli przy określaniu właściwości width lub height została użyta wartość procentowa, to wartość tej właściwości będzie zależała od szerokości lub wysokości elementu rodzicielskiego.

5. ;

Zakończ tę definicję za pomocą średnika.

6. top:

Podaj właściwość top i dwukropek.

7. 75px

Teraz podaj wartość określającą dystans, na jaki element zostanie przesunięty ku dołowi. W tym celu możesz użyć:

• wielkości określającej długość, np. 25px, która będzie określać dystans, na jaki element zostanie odsunięty od górnej krawędzi okna lub elementu rodzicielskiego;

• wartości procentowej, np. 55%. Jej użycie spowoduje, że przesunięcie będzie zależne od szerokości okna lub elementu rodzicielskiego;

• wartości auto, która sprawia, że przeglądarka będzie mogła obliczyć przesunięcie, jeśli właściwości position zostanie przypisana wartość absolute; w przeciwnym razie właściwość top będzie równa 0.

8. ;}

Zamknij definicję za pomocą średnika i zakończ regułę zamykającym nawiasem klamrowym }.

✓ Rady

■ Możesz użyć wartości ujemnych, aby

przesunąć element ku górze i w lewo,

zamiast ku dołowi i w prawo.

■ W przypadku elementów, których pozycja została zdefiniowana jako względna, właściwości left oraz top nie mają wpływu na marginesy. Oznacza to, że określenie lewego i górnego marginesu może spowodować przesunięcie zawartości elementu z jej naturalnie zdefiniowanego bloku i nałożenie się na inną zawartość strony.

■ Choć właściwości top i left nie są dziedziczone przez elementy potomne, to jednak elementy potomne zostaną przesunięte wraz ze swoimi elementami rodzicielskimi.

Określanie marginesu

127