Hướng dẫn Tìm hiểu khái niệm Contextual Position

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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.

contextual-position.png

Code HTML của hình trên chỉ đơn giản như sau:
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.

contextual-position-1.png

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

contextual-position-2.png

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;}

contextual-position-3.png

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.


Nguồn: izwebz.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom