Contextual Positioning là m t khái ni m h t s c quan tr ng mà
b n c n n m v ng n u b n mu n s d ng CSS đ thi t k giao di n thay cho dùng b ng HTML. Nói nôm na thì Contextual
Positioning có ngh a là khi b n nh v m t thành ph n b t k s ĩ đ d ng 4 giá tr top, right, bottom và left. B n th c ch t nh v thànhđ ph n ó d a vào v trí c a m t thành ph n khác. Thành ph n đ khác ó c g i là Contextual Positioning.đ đ
Nói m t ví d trong th c t đ b n d hi u. Gi s ai ó nói b n đ
kê chi c bàn vào gi a. B n l p t c s h i “vào gi a cái gì?” B i vì
b n c n m t cái gì ó đ đ xác nh âu là gi a đ đ đ còn nh v chi cđ
bàn. N u h nói “vào gi a c n phòngă ” thì b n ch vi c t nó vào đ gi a c n phòng thôi. Nói chung, khi nh v m t thành ph n, b n ă đ c n m t thành ph n khác đ xác nh v trí c a thành ph n b n đ
ang c n s p x p l i v trí. Và thành ph n khác ó trong CSS g i
đ đ
là Contextual Postioning.
Khi b n nh v m t thành ph n v iđ Absolute Position, thì giá tr m c nh th <body> là contextual position c a nó. B n c ng có th
đ ũ
thay i giá tr m c nh này b ng b t c thành ph n “m ” nào đ đ c a nó. Mi n là b n i giá tr position c a thành ph n m đ thành Relative.
Trong ví d này tôi s có 2 o n v n b n và 1 t m hình. Tôi mu nđ ă t m hình đ c hi n th n m è lên gi a o n v n trên và d i . Rõđ đ ă ràng b n không th s d ng float đ có đ c v trí này. Thay vào
ó chúng ta ph i s d ng Position. đ
Code HTML c a hình trên ch n gi n nh sauđ <body>
<div id="wrap">
<h3>Contextual Position</h3> <p>Nội dung thêm vào đây</p>
<p class="second">Nội dung thêm vào đây
<img class="date" src="images/date.png" alt="date" /> </p>
</div><!--End #wrap--> </body>
Khi b n xem trang này b ng trình duy t, b n s th y hình t n g t nh sau. hình ch p này, tôi ã t giá tr width c a #wrap là đ đ 300px và cho hi n th đ n g vi n và màu n n cho d quan sát.
Bây gi n u chúng ta ra l nh cho trình duy t “ t t m hình kia vào đ gi a!” . T t nhiên, vì nó mu n làm hài lòng b n nên nó ph i tuân theo mà không dám h i l i là “ t vào gi a cái gì h anh?”đ . Do v y nó m c nh cách t nh sauđ đ
img.date {position: absolute; top: 20px; left: 20px;}
B i vì chúng ta ch nói trình duy t nh v tuy t i t m hình mà đ đ không nói rõ cho nó ph i t nó tuy t i so v i cái gì. Trong đ đ tr n g h p này vào lúc c p bách nó l y ngay th body đ làm thành ph n t n g i . Nh ng t t nhiên ó không ph i là i u mìnhđ đ đ mu n, do v y mình s nói v i trình duy t rõ ràng h n b ng cách cho nó bi t chính xác mình mu n t âu.đ đ
Nh b n th y trên, th p c a o n v n th nh t chính là th m đ ă c a t m hình. Chúng ta s l y th ó làm c n b n và i u ch nh đ ă đ t m hình theo nó. V y nên trong code CSS, b n khai báo position cho th p v i class=”second” là relative
p.second {position: relative;}
Ngay khi b n i position c a thđ p thành relative, l p t c trình duy t s hi u b n mu n nó nh v t n g n g v i th nào và bây gi đ b n có th i u ch nh v trí c a t m hình theo ý mình. V i position đ b n có th s d ng c giá tr âm nh là -30px ho c -nPx.
ây là m t trong nh ng tính n ng khá hay c a CSS nh ng c ng
Đ ă ũ
h i khó di n t b ng l i. Do v y tôi có làm m tđ Video Tutorial v v n này, hy v ng b n s d hi u h n =). (adsbygoogle = window.adsbygoogle || []).push({});