Là vị trí hoàn toàn xấu trong css?

giới thiệu định vị

Định vị cho phép chúng tôi tạo ra các kết quả thú vị bằng cách ghi đè luồng tài liệu thông thường. Điều gì sẽ xảy ra nếu bạn muốn thay đổi một chút vị trí của một số hộp từ vị trí luồng mặc định của chúng để mang lại cảm giác hơi kỳ quặc, đau khổ? . Hoặc điều gì sẽ xảy ra nếu bạn muốn tạo một phần tử giao diện người dùng nổi trên đầu các phần khác của trang và/hoặc luôn nằm ở cùng một vị trí bên trong cửa sổ trình duyệt bất kể trang được cuộn bao nhiêu?

Có một số loại định vị khác nhau mà bạn có thể áp dụng cho các phần tử HTML. Để tạo một loại định vị cụ thể hoạt động trên một phần tử, chúng tôi sử dụng thuộc tính

position: relative;

định vị tĩnh

Định vị tĩnh là mặc định mà mọi phần tử có được. Nó chỉ có nghĩa là "đặt phần tử vào vị trí bình thường của nó trong luồng tài liệu — không có gì đặc biệt để xem ở đây. "

Để xem điều này (và thiết lập ví dụ của bạn cho các phần trong tương lai), trước tiên hãy thêm một

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

<p class="positioned">…p>

Bây giờ hãy thêm quy tắc sau vào cuối CSS của bạn

.positioned {
  position: static;
  background: yellow;
}

Nếu save và refresh thì sẽ không thấy khác biệt gì cả, ngoại trừ màu nền của đoạn 2 đã được cập nhật. Điều này ổn — như chúng tôi đã nói trước đây, định vị tĩnh là hành vi mặc định

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

top: 30px;
left: 30px;

Định vị tương đối

Định vị tương đối là loại vị trí đầu tiên chúng ta sẽ xem xét. Điều này rất giống với định vị tĩnh, ngoại trừ một khi phần tử được định vị đã diễn ra trong luồng thông thường, thì bạn có thể sửa đổi vị trí cuối cùng của nó, bao gồm cả việc làm cho nó chồng lên các phần tử khác trên trang. Hãy tiếp tục và cập nhật khai báo

position: relative;

position: relative;

Nếu bạn lưu và làm mới ở giai đoạn này, bạn sẽ không thấy kết quả thay đổi gì cả. Vậy làm thế nào để bạn sửa đổi vị trí của phần tử?

Giới thiệu trên, dưới, trái và phải

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

position: relative;

position: relative;

top: 30px;
left: 30px;

Ghi chú. Giá trị của các thuộc tính này có thể lấy bất kỳ đơn vị nào mà bạn mong đợi một cách hợp lý. pixel, mm, rems, %, v.v.

Nếu bây giờ bạn lưu và làm mới, bạn sẽ nhận được kết quả như thế này

position: relative;

position: relative;

Tuyệt nhỉ? . Tại sao nó lại di chuyển xuống dưới cùng và sang phải nếu chúng tôi chỉ định trên cùng và bên trái? . Bạn cần nghĩ về nó như thể có một lực vô hình đẩy mặt xác định của hộp được định vị, di chuyển nó theo hướng ngược lại. Vì vậy, ví dụ: nếu bạn chỉ định

position: relative;

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

position: relative;

Định vị tuyệt đối

Định vị tuyệt đối mang lại kết quả rất khác

Đặt vị trí. tuyệt đối

Hãy thử thay đổi khai báo vị trí trong mã của bạn như sau

position: relative;

Nếu bây giờ bạn lưu và làm mới, bạn sẽ thấy một cái gì đó giống như vậy

position: relative;

position: relative;

Trước hết, hãy lưu ý rằng khoảng cách nơi phần tử được định vị trong luồng tài liệu không còn nữa — phần tử thứ nhất và thứ ba đã đóng lại với nhau giống như nó không còn tồn tại nữa. Vâng, theo một cách nào đó, điều này đúng. Một phần tử được định vị tuyệt đối không còn tồn tại trong luồng tài liệu thông thường. Thay vào đó, nó nằm trên lớp riêng của nó tách biệt với mọi thứ khác. Điều này rất hữu ích. điều đó có nghĩa là chúng tôi có thể tạo các tính năng giao diện người dùng biệt lập không can thiệp vào bố cục của các phần tử khác trên trang. Ví dụ: hộp thông tin bật lên, menu điều khiển, bảng cuộn qua, các tính năng giao diện người dùng có thể được kéo và thả ở bất kỳ đâu trên trang, v.v.

Thứ hai, lưu ý rằng vị trí của phần tử đã thay đổi. Điều này là do

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

Ghi chú. Bạn có thể sử dụng

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

top: 30px;
left: 30px;

position: relative;

position: relative;

Ghi chú. Có, lề vẫn ảnh hưởng đến các phần tử được định vị. Tuy nhiên, sự sụp đổ ký quỹ không

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

position: relative;

Bối cảnh định vị

Phần tử nào là "phần tử chứa" của một phần tử được định vị tuyệt đối?

Nếu không có phần tử tổ tiên nào có thuộc tính vị trí được xác định rõ ràng, thì theo mặc định, tất cả các phần tử tổ tiên sẽ có vị trí tĩnh. Kết quả của việc này là phần tử được định vị tuyệt đối sẽ được chứa trong khối chứa ban đầu. Khối chứa ban đầu có kích thước của khung nhìn và cũng là khối chứa phần tử

position: relative;

position: relative;

Phần tử được định vị được lồng vào bên trong

position: relative;

position: relative;

position: relative;

Điều này sẽ cho kết quả sau

.positioned {
  position: static;
  background: yellow;
}

.positioned {
  position: static;
  background: yellow;
}

Phần tử được định vị hiện nằm so với phần tử

position: relative;

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

position: relative;

Giới thiệu chỉ số z

Tất cả vị trí tuyệt đối này rất thú vị, nhưng có một tính năng khác mà chúng tôi chưa xem xét. Khi các phần tử bắt đầu chồng lên nhau, điều gì quyết định phần tử nào xuất hiện trên các phần tử khác và phần tử nào xuất hiện dưới các phần tử khác? . Còn khi chúng ta có nhiều hơn một thì sao?

Hãy thử thêm đoạn sau vào CSS của bạn để làm cho đoạn đầu tiên cũng được định vị tuyệt đối

.positioned {
  position: static;
  background: yellow;
}

Tại thời điểm này, bạn sẽ thấy đoạn đầu tiên có màu vàng chanh, được di chuyển ra khỏi luồng tài liệu và được đặt ở vị trí cao hơn một chút so với vị trí ban đầu. Nó cũng được xếp chồng lên nhau bên dưới đoạn văn bản gốc

position: relative;

position: relative;

Bạn có thể thay đổi thứ tự xếp chồng không? . "z-index" là tham chiếu đến trục z. Bạn có thể nhớ lại các điểm trước trong khóa học mà chúng ta đã thảo luận về các trang web sử dụng tọa độ ngang (trục x) và dọc (trục y) để tìm ra vị trí cho những thứ như hình nền và hiệu ứng bóng đổ. Đối với các ngôn ngữ chạy từ trái sang phải, (0,0) nằm ở trên cùng bên trái của trang (hoặc phần tử) và các trục x và y chạy qua bên phải và xuống dưới trang

Các trang web cũng có trục z. một đường tưởng tượng chạy từ bề mặt màn hình về phía khuôn mặt của bạn (hoặc bất kỳ thứ gì khác mà bạn muốn có ở phía trước màn hình). Giá trị

position: relative;

position: relative;

position: relative;

Để thay đổi thứ tự xếp chồng, hãy thử thêm khai báo sau vào quy tắc

position: relative;

.positioned {
  position: static;
  background: yellow;
}

Bây giờ bạn sẽ thấy đoạn vôi ở trên cùng

.positioned {
  position: static;
  background: yellow;
}

.positioned {
  position: static;
  background: yellow;
}

Lưu ý rằng

position: relative;

Ghi chú. Bạn có thể xem một ví dụ về điều này trực tiếp tại

position: relative;

định vị cố định

Bây giờ chúng ta hãy nhìn vào vị trí cố định. Điều này hoạt động theo cách chính xác giống như định vị tuyệt đối, với một điểm khác biệt chính. trong khi định vị tuyệt đối cố định một phần tử ở vị trí tương đối so với tổ tiên được định vị gần nhất của nó (khối chứa ban đầu nếu không có), định vị cố định thường cố định một phần tử ở vị trí tương ứng với phần hiển thị của chế độ xem. (Một ngoại lệ xảy ra nếu một trong các tổ tiên của phần tử là một khối chứa cố định vì thuộc tính biến đổi của nó có giá trị khác không. ) Điều này có nghĩa là bạn có thể tạo các mục giao diện người dùng hữu ích được cố định tại chỗ, chẳng hạn như các menu điều hướng liên tục luôn hiển thị cho dù trang có cuộn bao nhiêu đi chăng nữa

Hãy đặt cùng một ví dụ đơn giản để hiển thị những gì chúng tôi muốn nói. Trước hết, hãy xóa các quy tắc

position: relative;

position: relative;

Bây giờ hãy cập nhật quy tắc

position: relative;

position: relative;

.positioned {
  position: static;
  background: yellow;
}

Bây giờ chúng ta sẽ cung cấp phần tử

position: relative;

position: relative;

.positioned {
  position: static;
  background: yellow;
}

Cần có

position: relative;

Nếu bạn lưu và làm mới, bạn sẽ thấy một hiệu ứng nhỏ thú vị là tiêu đề vẫn cố định — nội dung dường như cuộn lên và biến mất bên dưới tiêu đề đó. Nhưng hãy lưu ý cách một số nội dung ban đầu được cắt bớt dưới tiêu đề. Điều này là do tiêu đề được định vị không còn xuất hiện trong luồng tài liệu, vì vậy phần còn lại của nội dung sẽ di chuyển lên trên cùng. Chúng ta có thể cải thiện điều này bằng cách di chuyển tất cả các đoạn xuống dưới một chút. Chúng ta có thể làm điều này bằng cách đặt một số lề trên cho đoạn đầu tiên. thêm cái này ngay bây giờ

.positioned {
  position: static;
  background: yellow;
}

Bây giờ bạn sẽ thấy ví dụ đã hoàn thành

.positioned {
  position: static;
  background: yellow;
}

position: relative;

Ghi chú. Bạn có thể xem một ví dụ về điều này trực tiếp tại

position: relative;

định vị dính

Có một giá trị vị trí khác có tên là

position: relative;

Ví dụ cơ bản

Ví dụ: có thể sử dụng định vị cố định để làm cho thanh điều hướng cuộn theo trang cho đến một điểm nhất định rồi dính vào đầu trang

position: relative;

position: relative;

position: relative;

chỉ mục cuộn

Một cách sử dụng phổ biến và thú vị của

position: relative;

position: relative;

CSS có thể trông như sau. Trong luồng thông thường, các phần tử

position: relative;

position: relative;

position: relative;

top: 30px;
left: 30px;

position: relative;

.positioned {
  position: static;
  background: yellow;
}

position: relative;

Các phần tử dính là "dính" so với tổ tiên gần nhất với "cơ chế cuộn", được xác định bởi thuộc tính vị trí của tổ tiên của nó

Ghi chú. Bạn có thể xem ví dụ này trực tiếp tại

position: relative;

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . định vị

Bản tóm tắt

Tôi chắc rằng bạn đã rất vui khi chơi với tính năng định vị cơ bản. Mặc dù đây không phải là phương pháp lý tưởng để sử dụng cho toàn bộ bố cục, nhưng có nhiều mục tiêu cụ thể mà phương pháp này phù hợp với

Tại sao bạn không nên sử dụng vị trí tuyệt đối?

Có nên sử dụng vị trí tuyệt đối không?

Điều gì xảy ra với vị trí tuyệt đối trong CSS?

Có tệ không khi sử dụng vị trí tương đối trong CSS?