- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Tìm hiểu khái niệm Contextual Position
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 mình sẽ có 2 đoạn văn bản và 1 tấm hình. Mình 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:
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, mình đã đặ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
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
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.
Chúc các bạn thành công.
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 mình sẽ có 2 đoạn văn bản và 1 tấm hình. Mình 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.
HTML:
<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, mình đã đặ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.
Mã:
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
Mã:
p.second {position: relative;}
Đâ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.
Chúc các bạn thành công.
Nguồn: izwebz.com
Bài viết liên quan
Bài viết mới
