Position Property


Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho Position property là: Static, Absolute, Fixed và Reltaive. Trong đó Static là giá trị mặc định khi không có giá trị nào được gán. Trong ví dụ dưới đây bạn sẽ thấy có 4 đoạn văn ngắn. Đoạn văn thứ 1, 2 và 4 tôi để giá trị mặc định là Static và đoạn văn thứ 3 được gán id để chúng ta có thể thay đổi nó mà không ảnh hưởng đến các đoạn khác.

Static Position

Trước hết là chế độ Static mặc định khi không có giá trị nào được gán, bạn sẽ thấy 4 đoạn văn xếp chồng lên nhau

css

Với giá trị Static các thành phần chỉ đơn thuần được sắp xếp theo thứ tự xuất hiện và được phân cách bởi các giá trị margin mặc định. Để thay đổi cách sắp xếp này, bạn cần sử dụng một trong những cách sau đây.

Relative Position

Bây giờ chúng ta sẽ thử di chuyển đoạn văn thứ ba bằng cách gán cho nó giá trị là relative. Ở mỗi giá trị này sẽ có 4 tuỳ biến lần lượt là top, right, bottom và left cho bạn sử dụng. Tuy nhiên trong hầu hết các trường hợp, bạn chỉ cần sử dụng hai giá trị là top và left là đủ đạt được mục đích.

1
2
3
4
5
6
7
p#dac_biet {
position: relative;
top: 30px;
left: 20px;
color: red;
background-color:#FFF;
}

Ở code HTML bạn phải có

1
2
3
4
<p>Đoạn văn bản thứ nhất …</p>
<p>Đoạn văn bản thứ 2 …</p>
<p id=”dac_biet”>Đoạn văn bản thứ 3 ..</p>
<p>Đoạn văn bản thứ 4 …</p>

css

Ở trình duyệt bạn sẽ thấy đoạn văn bản thứ 3 bị dịch chuyển xuống dưới 30 px và lệch sang phải 20px. Như đã nói ở trên các thành phần có mối liên quan đến nhau, do vậy khi bạn đặt giá trị {top: 30px; left: 20px;} thì đoạn văn này sẽ bị di chuyển tương ứng với đoạn văn nằm trên nó. Cụ thể cạnh trên của nó cách cạnh đáy của đoạn thứ 2 là 30px.

Ở trong trường hợp Relative này, khi đoạn văn bị di chuyển nó cũng để lại một khoảng trống bằng với kích thước cũ của nó và dù nó di chuyển sang vị trí mới. Khoảng không nó chiếm vẫn không bị mất đi. Cho nên nếu bạn sử dụng phương pháp này vào giao diện, bạn cũng cần di chuyển đoạn văn thứ 4 sao cho nó không bị đè lên nhau.

Absolute Position

Trong phần này ta sẽ thử với giá trị là absolute

css

Bạn sẽ thấy đoạn văn thứ 3 bị di chuyển lên trên và cách biên trình duyệt là 30px và 20px tương ứng với trên và trái. Bởi vì khi định vị với giá trị là absolute cho một thành phần nào đó, nó sẽ bị tách ra khỏi vị trí thông thường của nó. Khoảng không cũ nó bỏ lại đã bị đoạn văn thứ 4 di chuyển lên lấp lại. Đoạn văn thứ 3 này trở nên hoàn toàn độc lập với các thành phần xung quanh.

Fixed Position

Fixed Position cho hiệu ứng giống y như Absolute chỉ có điều khi bạn kéo thanh cuộn dọc, đoạn văn thứ 3 sẽ giữ nguyên vị trí và không bị cuốn theo trình duyệt.

Một phản hồi to “Position Property”

  1. Minh Nguyen Says:

    Ôi, giờ mình mí hiểu Position làm gì :”>


Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: