Hướng dẫn css absolute position best practice - css vị trí tuyệt đối thực hành tốt nhất

Giới thiệu

Trong bài viết này, bạn sẽ học cách sử dụng CSS position: relative và position: absolute thông qua số lượng lớn các bản demo và hỗ trợ học tập.

CSS position đôi khi được coi là một chủ đề nâng cao bởi vì nó có thể làm những việc có phần bất ngờ. Chà, đừng để cho các chuyên gia, các chuyên gia sợ hãi khi bạn theo đuổi sự xuất sắc trong năng lực CSS của bạn! Đó là một chủ đề rất dễ tiếp cận khi bạn đã trang bị một số ý tưởng cơ bản.

Kết xuất dòng chảy

Một khái niệm quan trọng để hiểu định vị tương đối/tuyệt đối là dòng chảy.

Ý tưởng chung là các yếu tố HTML đều chiếm một số không gian. Công cụ kết xuất trình duyệt của bạn luôn hiển thị mọi thứ theo kiểu giống như lưới, bắt đầu ở góc trên cùng bên trái và di chuyển liên tiếp về phía dưới bên phải cho đến khi nó thực hiện tất cả nội dung HTML của bạn.

Nếu bạn đã từng có một kết nối internet chậm và xem những thứ lớn trên trang web sẽ đẩy mọi thứ ngay lập tức và xuống, thì đó thực chất là kết xuất dòng chảy.

Bạn có thể thay đổi hành vi mặc định này bằng CSS position.

Vị trí CSS

CSS position đôi khi được coi là một kỹ năng nâng cao bởi vì nó không trực quan như font-size hoặc

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

Đây là những giá trị có thể cho CSS position:

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */
}

Hôm nay, chúng tôi sẽ chỉ nhìn vào position: absolute và position: relative vì họ có lẽ là những người linh hoạt nhất sẽ giúp bạn có được nhiều dặm một khi bạn cảm thấy tự tin với họ.

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

Khi bạn tạo ra một phần tử HTML position: relative, nó sẽ vẫn còn trong dòng chảy của bố cục nhưng bạn có thể di chuyển nó xung quanh!

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

Cùng với position: relative, bạn thường muốn xác định

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

Bạn có thể nghĩ về vị trí tương đối của người Viking như là: Liên quan đến nơi nó được định vị ban đầu. Trong trường hợp này, Quảng trường Xanh hiện là

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

Điều mà cũng đáng chú ý là chiều rộng và chiều cao của nó được bảo tồn trong lưới vuông. Điều đó có nghĩa là nó vẫn còn được coi là người khác trong dòng chảy của bố cục, nó chỉ bị ảnh hưởng.

Định vị tuyệt đối

Định vị tuyệt đối là một quy tắc CSS rất mạnh để di chuyển các phần tử HTML xung quanh. Đôi khi mang lại kết quả bất ngờ:

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

Quảng trường màu cam thực sự là thứ 13 trong số 25 hình vuông này [hình ở giữa lưới], nhưng có vẻ như nó là hình vuông cuối cùng! Kỳ dị. Sử dụng position: absolute đưa các yếu tố ra khỏi dòng chảy, do đó, không gian lưới của nó bị sụp đổ.

Phải, nhưng tại sao lại có tất cả các con đường lên đó ?!

Tọa độ bắt nguồn

Quảng trường màu cam được đặt ở tọa độ 0x, 0y [ví dụ: góc trên cùng bên trái]. Chỉ cần kết xuất trình duyệt luôn bắt đầu ở góc trên cùng bên trái, các yếu tố position: absolute sử dụng đó làm nguồn gốc kết xuất của chúng. Bạn có thể sử dụng ________ 16/________ 17/________ 18/________ 19 Thuộc tính để bù nó từ đó.

Nhưng, bạn cũng có thể cung cấp cho nó các tọa độ nguồn gốc khác nhau

.grid {
  position: relative;
}
.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

Trong ví dụ trên, phần tử cha [

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

Trong khi điều này có vẻ như hành vi không trực quan, nhưng nó thực sự có chủ ý! Cho phép điều này cung cấp cho bạn rất nhiều quyền kiểm soát đối với nơi/cách bạn sắp xếp các yếu tố HTML

Sự kết luận

Khi bạn bắt đầu sử dụng position: relative và position: absolute, nó sẽ mở ra một thế giới mới về các khả năng thiết kế. Bạn có thể tạo ra các yếu tố thị giác nhiều lớp và cảm thấy sự tự tin sâu sắc về cách trình duyệt sẽ hiển thị, và do đó đặt các yếu tố thị giác mà bạn đã thiết kế tỉ mỉ.

Đó có phải là thực hành tốt để sử dụng vị trí tuyệt đối?

Khi nào bạn nên sử dụng CSS định vị tuyệt đối?

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

Vị trí tốt nhất trong CSS là gì?