Contextual Position
- October 13, 2008
- 8 comments
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ương 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ị đường 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ường 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ương đố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ương ứng 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 =).
Hướng đối tượng dựa vào cấp bậc XHTML »
em rat la thich cai phong cach giang bai cua anh DW – lau lau pha chut hai huoc
Cám ơn bài viết rất nhiều !
Cảm ơn anh rất nhiều, đúng là dùng position định vị thành phần rất hay và tiện, hơn là dùng padding vs margin nhiều.
Cảm ơn DW rất nhiều, Anh đúng là một giáo viên đẳng cấp, mặc dù truyền đạt qua video nhưng A dạy rất dễ hiểu .
@mama
Ko hiểu ý bác lắm nhưng mấy cái ảnh đó là demo cho Contextual Position trong css mà . Dựa vào đâu mà bác cho đó là lỗi nhỉ
Trang web của bạn rất hay nhưng trên hoặc dưới những bức ảnh nó có những cái ảnh này là do lỗi hay do cố tình gì hả bạn.
http://www.izwebz.com/wp-content/uploads/2009/08/contextual-position.png
Thank U so much
Các bài viết trên trang web rất hữu ích, hơi tiếc 1 điều mình biết trang web hơi muộn
, cảm ơn bạn rất nhiều nhé