CSS Positioning Elements – Vị trí các phần tử trong CSS

by

Bài trước đã nói về các thuộc tính của background trong bài này chúng ta sẽ tổng hợp lại các cách để định vị một phần tử trong css.

Vị trí của các phần tử là nói về cách định vị các thành phần hoặc các thực thể trong CSS. Có năm giá trị để đặt vị trí các phần tử như sau:

  • Fixed
  • Static
  • Relative
  • Absolute
  • Sticky

Vị trí của một phần tử có thể được xác định bằng việc sử dụng các thuộc tính như trên cùng (top), bên phải (right), dưới cùng (bottom), bên trái (left)…khi sử dụng top bạn sẽ thấy phần tử đi xuống vì top ở đây có nghĩa là cách cạnh bên trên bao nhiêu px, tương tự như vậy cho các hướng khác.

Fixed: Một phần tử có vị trí là fixed, nó sẽ cho phép ta cố định vị trí của phần tử ngay cả khi cuộn trang.
Chúng ta có thể đặt vị trí của phần tử bằng cách sử dụng các vị trí top, bottom, right, left.

.fixed {
        position: fixed;
        background: #cc0000;
        color: #ffffff;
        padding: 30px;
        top: 50;
        left: 10;
    }

Static: Đây là vị trí mặc định của phần tử, nó sẽ xuất hiện theo đúng trình tự bình thường nó được nhập vào, các vị trí top, bottom, left, right sẽ không tác động được đến phần tử có vị trí là static.

Relative: Phần tử sẽ định vị dựa trên vị trí bình thường của nó, khi đặt các vị trí top, bottom, left, right thì các vị trí này sẽ sử dụng vị trí bình thường của phần tử làm gốc để từ đó định vị ra vị trí mới.

.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD25;
}

Khi phần tử xê dịch đi một vị trí mới, thì khoảng trống do phần tử để lại sẽ được giữ nguyên, không phần tử nào được sử dụng vào.

Absolute: Một phần tử có vị trí tuyệt đối sẽ được định vị dựa vào phần tử cha của nó. Nó sẽ tìm kiếm các thẻ cha gần nhất của nó, xem thẻ cha nào có thuộc tính position thì lấy thẻ cha đó làm gốc tọa độ.
Nếu phần tử cha không được định vị thì nó sẽ sử dụng phần html của trang để làm mốc định vị. 

.relative {
  position: relative;//phần tử cha phải được xác định vị trí
  width: 400px;
  height: 200px;
  border: 3px solid #73AD25;
} 

.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD25;
}

Sticky (nhiều trình duyệt không hỗ trợ): phần tử được định vị tương đối dựa vào việc cuộn chuột của người dùng. Nếu phần tử nằm giữa trang, khi cuộn chuột phần tử sẽ di chuyển lên trên cùng và nằm cố định tại mép trên.

.sticky {
  position: sticky;
  top: 0px;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

Sự khác biệt giữa Sticky và fixed:

Sticky: có thể di chuyển cuộn lên xuống, nó có ảnh hưởng về không gian với các phần tử khác

Fixed: không thể di chuyển, nó không ảnh hưởng về không gian với các phần tử khác..định vị vị trí là so với các cạnh cửa sổ window/frame

Khi một đối tượng phụ thuộc vào một đối tượng khác thì nó sử dụng thuộc tính position là absolution, còn khi phụ thuộc vào cửa sổ trình duyệt thì sử dụng fixed.

Leave a Comment