Artykuł ten opisuje, w jaki sposób pozycjonować elementy w stosie.
Umieszczenie potomka stosu
Normalnie elementy potomne stosu rozciągają i dopasowują się rozmiarem do stack
Pozycja elementu potomnego może być określona poprzez dodanie dwóch atrybutów do tego elementu. Dla pozycjonowania poziomego zastosuj atrybut left, a dla pozycjonowania pionowego zastosuj atrybut top. Jeśli nie dodasz tych atrybutów do elementów będących dziećmi elementu stack, to potomek dopasuje się sam do rozmiaru stosu.
var el = env.locale; Przykład 1 : Źródła Podgląd
<stack> <button label="Gobeliny" left="5" top="5"/> <button label="Trole" left="60" top="20"/> <button label="Wampiry" left="10" top="60"/> </stack>
Stos (stack) zawiera trzy elementy, każdy z nich jest pozycjonowany, dzięki rozmieszczeniu atrybutów left oraz top. Tutaj wszystkie dzieci stosu są przyciskami, lecz elementy nie są tego samego typu. Może to być dowolny element zawierający pudełko i inne stosy.
Rozmiar stack jest określony na podstawie pozycji elementów potomnych. Zawsze jest o takich rozmiarach, aby elementy potomne były widoczne. Więc jaki ustawisz atrybut left na 400, stos będzie miał długość 400 pikseli wokół siebie plus długość elementu. Możemy przesłonić ten rozmiar różnymi własnościami stylu, takimi jak width czy max-width.
Możemy zastosować skrypt do uporządkowania wartości atrybutów left i top i w ten sposób elementy będą poruszały się wokoło. Zaletą stosów jest to, że w momencie, gdy jeden absolutnie pozycjonowany element zmienia swoją pozycję, pozycja innych elementów nie jest zmieniana. Jeśli próbujemy przenieść elementy w prawidłowym pudełku, inne elementy mogą zmieniać swoje pozycje.
Jest także możliwe umieszczenie elementów potomnych, więc są one nakładkami. Kiedy rysujemy elementy potomne, elementy są pokazywane w kolejności, w której pojawiły się w stosie (stack). To jest tak, że pierwszy element potomny jest wyświetlony w stack jako tło (na samym spodzie), następny element potomny wyświetlony zostanie zaraz nad nim i tak dalej. Ostatni element potomny zostanie wyświetlony na samej górze. Możemy zastosować funkcje DOM do przesunięcia kolejności elementów wokoło.
Odpowiadający jako pierwszy zdarzeniom myszy, będzie to pierwszy element z góry. Znaczenie ma to przy dwóch przyciskach nałożonych na siebie, gdyż przycisk znajdujący się na górze zostanie przydzielony kliknięciu myszy i oddzielony od innych.
Następny artykuł opisuje element tabbox, który będzie jak pokład, ale dostarcza własną nawigację.