Định vị CSS không chỉ là tọa độ X, Y
Định vị CSS từ lâu đã là một phần quan trọng trong việc tạo bố cục trang web. Ngay cả với sự nổi lên của các kỹ thuật bố cục CSS mới hơn như Flexbox và CSS Grid, định vị vẫn có một vị trí quan trọng trong bất kỳ thủ thuật nào của nhà thiết kế web.
Khi sử dụng định vị CSS, điều đầu tiên bạn cần làm là thiết lập thuộc tính CSS cho vị trí để báo cho trình duyệt biết nếu bạn định sử dụng vị trí tuyệt đối hoặc tương đối cho một phần tử đã cho. Bạn cũng cần phải hiểu rõ sự khác biệt giữa hai thuộc tính định vị này.
Trong khi tuyệt đối và tương đối là hai thuộc tính vị trí CSS thường được sử dụng nhất trong thiết kế web, thì thực tế có bốn trạng thái cho thuộc tính vị trí:
- tĩnh
- tuyệt đối
- quan hệ
- đã sửa
Tĩnh là vị trí mặc định cho bất kỳ phần tử nào trên trang web. Nếu bạn không xác định vị trí của một phần tử, nó sẽ là tĩnh. Điều này có nghĩa là nó sẽ hiển thị trên màn hình dựa trên vị trí của nó trong tài liệu HTML và cách nó hiển thị bên trong luồng thông thường của tài liệu đó.
Nếu bạn áp dụng các quy tắc định vị như trên hoặc bên trái cho một phần tử có vị trí tĩnh, các quy tắc đó sẽ bị bỏ qua và phần tử sẽ vẫn ở vị trí xuất hiện trong luồng tài liệu bình thường. Trong thực tế, bạn hiếm khi, nếu cần, cần phải đặt một phần tử thành một vị trí tĩnh trong CSS vì đó là giá trị mặc định.
Định vị CSS tuyệt đối
Định vị tuyệt đối có lẽ là vị trí CSS dễ hiểu nhất. Bạn bắt đầu với thuộc tính vị trí CSS này:
vị trí: tuyệt đối;Giá trị này cho trình duyệt biết rằng mọi thứ sẽ được định vị sẽ bị xóa khỏi luồng thông thường của tài liệu và thay vào đó được đặt ở vị trí chính xác trên trang. Điều này được tính toán dựa trên tổ tiên không được định vị gần nhất của phần tử đó.
Vì một phần tử được định vị hoàn toàn được lấy ra khỏi luồng thông thường của tài liệu, nó sẽ không ảnh hưởng đến cách các phần tử trước hoặc sau khi nó trong HTML được định vị trên trang web.
Ví dụ - nếu bạn có một bộ phận được định vị bằng giá trị tương đối (chúng ta sẽ xem xét giá trị này ngay), và bên trong bộ phận đó bạn có một đoạn mà bạn muốn định vị 50 pixel từ phần đầu của bộ phận, bạn sẽ thêm giá trị vị trí của "tuyệt đối" vào đoạn đó cùng với giá trị bù đắp là 50px trên thuộc tính "trên cùng", như thế này.
vị trí: tuyệt đối; trên cùng: 50px;Yếu tố hoàn toàn vị trí này sau đó sẽ luôn hiển thị 50 pixel từ phần đầu của bộ phận tương đối có vị trí đó - bất kể hiển thị gì khác trong luồng thông thường. Phần tử vị trí "hoàn toàn" của bạn đã sử dụng phần tử tương đối được định vị làm bối cảnh của nó và giá trị đặt ra bạn sử dụng tương đối với điều đó.
Bốn thuộc tính định vị mà bạn có sẵn để sử dụng là:
- hàng đầu
- đúng
- đáy
- trái
Bạn có thể sử dụng đầu hoặc cuối (vì một phần tử không thể được định vị theo cả hai giá trị này) và cả phải hoặc trái.
Nếu một phần tử được đặt thành một vị trí tuyệt đối, nhưng nó không có tổ tiên không được định vị tĩnh, thì nó sẽ được định vị tương đối so với phần tử cơ thể, là phần tử mức cao nhất của trang.
Định vị tương đối
Chúng tôi đã đề cập đến vị trí tương đối, vì vậy hãy nhìn vào tài sản đó ngay bây giờ.
Định vị tương đối sử dụng bốn thuộc tính định vị tương tự như định vị tuyệt đối, nhưng thay vì căn cứ vào vị trí của phần tử khi tổ tiên có vị trí không tĩnh gần nhất của nó, nó bắt đầu từ nơi phần tử sẽ là nếu nó vẫn còn trong luồng bình thường.
Ví dụ: nếu bạn có ba đoạn trên trang web của mình và thứ ba có kiểu "vị trí: tương đối" được đặt trên đó, vị trí của nó sẽ được bù đắp dựa trên vị trí hiện tại của nó.
Đoạn 1.
Đoạn 2.
Đoạn 3.
Trong ví dụ trên, đoạn thứ ba sẽ được định vị 2em từ phía bên trái của phần tử thùng chứa, nhưng sẽ vẫn ở dưới hai đoạn đầu tiên. Nó sẽ vẫn còn trong dòng chảy bình thường của tài liệu, và chỉ được bù đắp một chút. Nếu bạn thay đổi nó thành vị trí: tuyệt đối; bất cứ điều gì sau nó sẽ hiển thị trên đầu trang của nó, bởi vì nó sẽ không còn trong dòng chảy bình thường của tài liệu.
Các yếu tố trên trang web thường được sử dụng để đặt giá trị vị trí: tương đối không có giá trị bù đắp được thiết lập, có nghĩa là yếu tố đó vẫn chính xác vị trí sẽ xuất hiện trong luồng thông thường. Điều này được thực hiện chỉ để thiết lập yếu tố đó như là một bối cảnh mà các yếu tố khác có thể được định vị hoàn toàn. Ví dụ, nếu bạn có một bộ phận xung quanh toàn bộ trang web của bạn với một giá trị class của "container" (một kịch bản rất phổ biến trong thiết kế web), phân chia đó có thể được đặt ở vị trí tương đối sao cho bất cứ thứ gì bên trong nó có thể sử dụng nó như một bối cảnh định vị.
Điều gì về định vị cố định?
Định vị cố định rất giống với vị trí tuyệt đối. Vị trí của phần tử được tính theo cùng một cách với mô hình tuyệt đối, nhưng các phần tử cố định sau đó được cố định tại vị trí đó - gần giống như một hình mờ . Mọi thứ khác trên trang sau đó sẽ cuộn qua phần tử đó.
Để sử dụng giá trị thuộc tính này, bạn sẽ đặt:
vị trí: cố định;Hãy ghi nhớ, khi bạn sửa một phần tử tại chỗ trên trang của bạn, nó sẽ in ở vị trí đó khi trang Web của bạn được in ra. Ví dụ: nếu phần tử của bạn được cố định ở đầu trang của bạn, phần tử đó sẽ xuất hiện ở đầu mỗi trang được in - vì nó được cố định ở đầu trang. Bạn có thể sử dụng các loại phương tiện để thay đổi cách các trang in hiển thị các phần tử cố định:
@media screen {h1 # first {vị trí: cố định; }} @media print {h1 # first {vị trí: tĩnh; }}Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 1/7/16.