Position trong CSS những điều lưu ý

Thuộc tính position có thể giúp bạn thao tác position của một phần tử, ví dụ:

.element {
  position: relative;
  top: 20px;
}

Liên quan đến position ban đầu của nó, phần tử ở trên bây giờ sẽ được di chuyển xuống từ trên cùng một đoạn 20px. Nếu chúng ta tạo animation cho các thuộc tính này, chúng ta có thể thấy điều này mang lại cho chúng ta bao nhiêu quyền kiểm soát (mặc dù đây không phải là ý tưởng hay vì lý do hiệu suất):

Relative chỉ là một trong sáu giá trị cho thuộc tính position.

Các bài viết liên quan:

• Global attribute trong html
• Hướng dẫn sử dụng android studio
• Hướng dẫn tạo đánh giá 5 sao trên Google
• CSS là gì? cách hoạt động và cách học CSS
• Selenium IDE- xác định phần tử html cho testing website
• Kiểm tra lỗ hổng bảo mật CSS Injection
• CSS trong React
• Xác định element html trong Selenium sử dụng CSS selector

Đây là những cái khác:

Position value

Static: mọi phần tử đều có position tĩnh theo mặc định, vì vậy phần tử sẽ dính vào luồng trang bình thường. Vì vậy, nếu có một định dạng left / right / top / bottom / z-index thì sẽ không có tác dụng đối với phần tử đó.

Relative: position ban đầu của phần tử vẫn nằm trong luồng tài liệu, giống như giá trị static. Nhưng bây giờ left / right / top / bottom / z-index sẽ hoạt động. Các thuộc tính position “nudge” phần tử từ position ban đầu theo hướng đó.

absolute: phần tử bị xóa khỏi luồng của tài liệu và các phần tử khác sẽ hoạt động như thể nó thậm chí không có ở đó trong khi tất cả các thuộc tính position khác sẽ hoạt động trên đó.

fixed: phần tử bị xóa khỏi luồng tài liệu giống như các phần tử được định vị tuyệt đối. Trên thực tế, chúng hoạt động gần như giống nhau, chỉ các phần tử được định vị fixed luôn liên quan đến tài liệu, không phải bất kỳ phần tử gốc cụ thể nào và không bị ảnh hưởng bởi việc Scroll.

sticky (experimental): phần tử được coi như một giá trị relative cho đến khi position Scroll của chế độ xem đạt đến ngưỡng được chỉ định, tại thời điểm đó phần tử sẽ có position fixed nơi nó được yêu cầu gắn vào.

inherit: giá trị position không phân tầng, vì vậy, giá trị này có thể được sử dụng để buộc nó một cách cụ thể và kế thừa giá trị định vị từ giá trị position mẹ của nó.

Absolute

Nếu phần tử con có giá trị tuyệt đối thì phần tử mẹ sẽ hoạt động như thể phần tử con hoàn toàn không có ở đó:

.element {
  position: absolute;
}

Và khi chúng tôi cố gắng đặt các giá trị khác, chẳng hạn như left, bottom và right, chúng tôi sẽ thấy rằng phần tử con đang thay đổi không phải với phần tử cha mà là tài liệu:

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Để làm cho phần tử con được định vị hoàn toàn từ phần tử mẹ của nó, chúng ta cần đặt điều này trên chính phần tử parent :

.parent {
  position: relative;
}

Bây giờ các thuộc tính như left, right, bottom và top sẽ tham chiếu đến phần tử mẹ, vì vậy nếu chúng ta làm cho phần tử con trong suốt, chúng ta có thể thấy nó nằm ngay ở dưới cùng của phần tử mẹ:

Fixed

Giá trị fixed tương tự như Absolute vì nó có thể giúp bạn định vị một phần tử ở bất kỳ đâu so với tài liệu, tuy nhiên giá trị này không bị ảnh hưởng khi cuộn. Xem phần tử con trong bản trình diễn bên dưới và làm thế nào, khi bạn cuộn, nó tiếp tục dính vào cuối trang:

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Xem thêm Static Website là gì?

Sticky

Giá trị static giống như một sự thỏa hiệp giữa các giá trị relative và fixed. Theo văn bản này, nó hiện là một giá trị thử nghiệm, có nghĩa là nó không phải là một phần của thông số kỹ thuật chính thức và chỉ được chấp nhận một phần bởi các trình duyệt được chọn. Nói cách khác, có lẽ không phải là ý tưởng tốt nhất nếu sử dụng điều này trên một trang web sản xuất trực tiếp.

Nó làm gì? Chà, nó cho phép bạn định vị một phần tử so với bất kỳ thứ gì trên tài liệu và sau đó, khi người dùng đã Scroll qua một điểm nhất định trong khung nhìn, hãy cố định position của phần tử vào position đó để nó vẫn được hiển thị liên tục giống như một phần tử có giá trị cố định.

Lấy ví dụ sau:

.element {
  position: sticky; top: 50px;
}

Phần tử sẽ được định vị relative cho đến khi position cuộn của khung nhìn đạt đến điểm mà phần tử sẽ cách đỉnh của khung nhìn 50px. Tại thời điểm đó, phần tử trở nên stricky và vẫn ở position cố định 50px trên cùng của màn hình.

Bản trình diễn sau minh họa điểm đó, trong đó điều hướng trên cùng là định vị relative mặc định và điều hướng thứ hai được đặt thành cố định ở trên cùng của chế độ xem. Xin lưu ý rằng bản demo sẽ chỉ hoạt động trong Chrome, Safari và Opera tại thời điểm viết bài này.

Khi nào nên sử dụng postion trong css

Trong CSS, bạn sẽ sử dụng thuộc tính ‘position’ khi muốn điều chỉnh vị trí của một thành phần trong trang web. Những trường hợp cần sử dụng ‘position’ bao gồm:

• Khi muốn tạo hiệu ứng overlay, ví dụ như tạo một hình ảnh nền trên một vùng màu nền khác.
• Khi muốn tạo hiệu ứng sticky menu hoặc sticky sidebar, tức là menu hoặc sidebar sẽ giữ vị trí cố định khi người dùng cuộn trang.
• Khi muốn tạo hiệu ứng parallax, tức là một thành phần sẽ di chuyển tốc độ khác so với các thành phần khác khi người dùng cuộn trang.
• Khi muốn tạo hiệu ứng modal, tức là một cửa sổ hiển thị trên màn hình khi người dùng nhấn vào một nút hoặc liên kết.

Tuy nhiên, bạn cần chú ý rằng sử dụng ‘position’ có thể làm cho mã CSS của bạn trở nên phức tạp hơn và khó hiểu hơn. Bạn nên sử dụng nó chỉ khi cần thiết và chú ý đến việc tái sử dụng và bảo trì mã.

một số ví dụ sử dụng position trong html và css

Ví dụ 1: Tạo hiệu ứng overlay cho hình ảnh nền trên một vùng màu nền khác HTML:

<div class="container">
  <img src="background.jpg" alt="Background">
  <div class="overlay"></div>
</div>

CSS:

.container {
  position: relative; /* đặt position cho thẻ cha là relative */
}

.container img {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute; /* đặt position cho thẻ overlay là absolute */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* màu nền overlay là màu đen có độ mờ */
}

Ví dụ 2: Tạo hiệu ứng sticky sidebar HTML:

<div class="container">
  <div class="sidebar">
    <!-- nội dung sidebar -->
  </div>
  <div class="main-content">
    <!-- nội dung chính -->
  </div>
</div>

CSS:

.sidebar {
  position: -webkit-sticky; /* sử dụng thuộc tính sticky cho sidebar */
  position: sticky;
  top: 0; /* đặt vị trí cố định tại đầu trang */
}

Ví dụ 3: Tạo hiệu ứng parallax cho hình ảnh HTML:

<div class="parallax-container">
  <img src="background.jpg" alt="Background" class="parallax">
  <!-- nội dung chính -->
</div>

CSS:

Copy code.parallax-container {
  position: relative; /* đặt position cho thẻ cha là relative */
  overflow: hidden; /* ẩn nội dung vượt qua */
}

.parallax {
  position: absolute; /* đặt position cho hình ảnh là absolute */
  top: 0;
  left: 0;
  width: 100%;
}

/* sử dụng jQuery để thiết lập hiệu ứng parallax */
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  $(".parallax").css("top", -scroll * 0.3 + "px"); /* tốc độ di chuyển của hình ảnh là 30% tốc độ cuộn trang */ });

Ví dụ 4: Tạo hiệu ứng modal HTML:

<button id="open-modal">Open Modal</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <!-- nội dung modal -->
  </div>
</div>

CSS:

.modal {
  display: none; /* ẩn modal ban đầu */
  position: fixed; /* đặt position là fixed để modal không thay đổi khi trang được cuộn */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* màu nền modal là màu đen có độ mờ */
  z-index: 1; /* đặt z-index cao hơn các thành phần khác để modal hiển thị trên cùng */
}

.modal-content {
  position: absolute; /* đặt position là absolute để modal-content hiển thị trên màu nền modal */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* canh giữa modal-content */
}

Javascript:

$("#open-modal").click(function(){
  $("#modal").show(); /* Hiển thị modal khi nút được nhấn */
});

$("#modal").click(function(e){
  if(e.target == this) { /* kiểm tra nếu click ở bên ngoài modal-content */
    $(this).hide(); /* ẩn modal */
  }
});

Trong ví dụ trên chúng ta sử dụng javascript để xử lý sự kiện click và hiển thị modal.