Hướng dẫn dùng position example trong PHP

Bài viết này sẽ giúp bạn nắm rõ về thuộc tính position trong CSS và cách sử dụng. Đây là một vấn đề gây nhầm lẫn với rất nhiều người, đặc biệt là những bạn mới học lập trình web.

Thuộc tính position trong CSS thường gây ra khá nhiều nhầm lẫn cho những bạn mới bước chân vào nghề lập trình web, các giá trị của thuộc tính này bao gồm những gì ?

Định nghĩa

Thuộc tính position xác định vị trí cho thành phần.

Thuộc tính position thường dùng kèm với các thuộc tính định vị trí: left, right, bottom, top

Thuộc tính position có các giá trị:

–  Static: Thành phần sẽ nằm theo thứ tự trong văn bản, đây là dạng mặc định.

–  Relative: Định vị trí tuyệt đối cho thành phần.

– Absolute: Định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài (thành phần định vị trí tương đối position: relative;) hoặc theo cửa sổ trình duyệt.

– Fixed: Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt.

– Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ:

Đối với các giá trị static và inherit tương đối dễ hiểu, chúng ta sẽ xem các ví dụ về các giá trị khác.

1. Fixed

element{

position: fixed;

top: 100px;

right: 100px;

}

Như vậy thì element sẽ cách mép trên và mép bên phải của cửa sổ trình duyệt (phần hiển thị trang web) 100 pixels.

Element sẽ nằm cố định ngay cả khi ta cuộn trang web lên, xuống, trái, phải.

Element không nằm trong normal flow của trang.

Giả sử ta có 3 thẻ a theo thứ tự là Link 1, Link 2, Link 3

<a href=”#”>Link 1</a>

<a href=”#”>Link 2</a>

<a href=”#”>Link 3</a>

Hiển thị như sau:

Khi ta cho thuộc tính position của thẻ a tương ứng với Link 2 nhận giá trị fixed, thì Link 2 sẽ ko còn ở giữa Link 1 và Link 3 nữa mà nó sẽ nằm ở vị trí bạn thiết lập cho nó bởi các thuộc tính top, bottom, left, right.

<a href=”#” style=”position: fixed”>Link 2</a>

2. Relative

Element sẽ được đặt ở vị trí tương đối so với chính nó.

Ta thêm thuộc tính top, bottom, left, right để thay đổi vị trí của element.

p {

    position: relative;

    left: -20px;

}

Thẻ p sẽ nằm lệch về bên trái so với vị trí ban đầu của nó là 20px.

Chú ý: Không như fixed position, element vẫn giữ một khoảng trống với diện tích bằng chính nó ở vị trí ban đầu của nó. Tức là nó vẫn nằm trong “normal flow of the page”.

 3. Absolute

Thuộc tính position: absolute; : Định vị trí tuyệt đối cho thành phần, khi sử dụng giá trị này thì vùng xử lý của thành phần sẽ phụ thuộc vào nội dung của thành phần.

Vị trí tuyệt đối phụ thuộc vào thành phần bao ngoài (thành phần định vị trí tương đối position: relative) hoặc theo cửa sổ trình duyệt.

Nếu không có element X nào thoả mãn điều kiện trên thì element X sẽ chính là html.

Element A cũng ko thuộc normal flow of the page

p {

    background: blue;

    position: absolute;

    left: -20px;

}

Vị trí mặc định của position là vị trí của thành phần bao ngoài.

Khi ta thêm giá trị left thì lập tức thành phần sử dụng position: absolute; sẽ định vị trí theo cửa sổ trình duyệt.

div {

    border: 1px solid red;

    height: 100px;

    position: relative;

}

p {

    background: blue;

    position: absolute;

    left: -20px;

}

Nếu thành phần bao ngoài sử dụng thuộc tính position: relative; thì thành phần sử dụng position: absolute; bên trong sẽ định vị trí theo thành phần bao ngoài.

Mỗi loại trong số chúng cho phép bạn định vị vị trí các phần tử bằng cách sử dụng tọa độ cụ thể, trái với kiểu định vị ngữ nghĩa (trái, phải, trên, dưới, giữa...) như Flexbox hay là Float.

Thay vì nói:

'Dính hộp này vào giữa container'

'Đặt cái hộp đó ở trên 20px, cách bên phải (phần tử cha của nó) 50px.'

Phần lớn các phần tử trên một trang web nên được đặt ra theo luồng tĩnh của trang.

Các lược đồ định vị relative, absolute, fixed phát huy tác dụng khi bạn muốn thực hiện định vị nâng cao hơn như: Định vị vị trí của một phần tử cụ thể mà không làm rối các phần tử xung quanh.

Bài viết này được chia thành hai phần. Chúng ta sẽ bắt đầu tìm hiểu từng phần về relative (vị trí tương đối), absolute (vị trí tuyệt đối) và fixed (cố định), sau đó chúng tôi sẽ áp dụng mọi thứ chúng tôi vừa học để tạo một menu dropdown lạ mắt.

1. Thiết lập ban đầu chuẩn bị cho CSS Advanced Positioning

  
    
    Positioning Is Easy!
    
  
  

    

      

        

        

        

      

    

    
    

      

        

        

        

      

    


    

      

        

        

        

      

    


  

Cấu trúc thư mục dự án Định vị nâng cao

Và chắc chắn bạn đã tạo file style.css và viết vào đó với các css cơ bản cần thiết.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 1200px;
}

.container {
  display: flex;
  justify-content: center;
}

.example {
  display: flex;
  justify-content: space-around;
  
  width: 800px;
  margin: 50px 0;
  background-color: #D6E9FE;
}

.item img {
  display: block;
}

Điều lạ duy nhất là thuộc tính height trong body, cho phép body đủ cao để chúng ta cuộn màn hình lên và xuống trang để xem các hành vi định vị khác nhau.

Các phần tử HTML sau khi dàn layout bằng flexbox và một chút CSS cơ bản cho dễ nhìn

2. Các phần tử Định vị nâng cao - Position Elements

Và khi nó không còn là stactic nữa thì người ta gọi nó là Position Elements. Chúng ta sẽ nói về chúng trong suốt bài viết này.

Các phần tử được định vị (Position Elements)
 

Nhưng cũng rất dễ dàng tìm thấy các phần tử được định vị tương đối và tuyệt đối bên trong các phần tử được định vị tĩnh.

3. Tìm hiểu về Định vị tương đối (postion: relative)

Phần tử được định vị tương đối (Position: relative;)

.item-relative {
  position: relative;
  top: 30px;
  left: 30px;
}

Đây là cách giống như thiết lập tọa độ (x, y) cho phần tử.

Định vị giống như thiết lập tọa độ cho phần tử

Mọi thứ khác biểu hiện như thể .item-relative nằm ở vị trí ban đầu.

Các thuộc tính top và left đo từ các cạnh trên và cạnh trái của hộp ban đầu. Chúng ta có thể bù tương đối với các cạnh khác với các thuộc tính bottom và right.

Bạn có thể định vị với tọa độ top, left và bottom, right

.item-relative {
  position: relative;
  bottom: 30px;
  right: 30px;
}

Chúng ta có thể dễ dàng sử dụng top: -30px; và bottom: 30px; ở trong cách khai báo bên trên.

4. Tìm hiểu về Định vị tuyệt đối (position: absolute)

Kể từ đó không còn bất kỳ mối quan hệ với các dòng chảy tĩnh của trang.

Phần tử được định vị tuyệt đối

.item-absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

Bạn cũng có thể thử đặt giá trị bottom hoặc right để hình dung rõ ràng hơn về cách position: absolute; hoạt động.

Phần tử được định vị tuyệt đối được căn chỉnh với cửa sổ trình duyệt

Hiệu ứng thú vị khác của định vị tuyệt đối là nó loại bỏ hoàn toàn một phần tử ra khỏi dòng chảy bình thường của trang.

Điều này dễ thấy hơn với các phần tử được căn trái, vì vậy, hãy tạm thời thay đổi thuộc tính justify-content của class .example:

.example { Trong định vị tương đối của chúng ta (hàng đầu tiên), vẫn còn một không gian nơi mà các phần tử được định vị sử dụng, nhưng với định vị tuyệt đối, không gian đó đã biến mất.

Nó như thể .item-absolute không còn tồn tại với phần tử cha và các yếu tố xung quanh.

Hãy chắn thay đổi justify-content trở lại space-around trước khi bạn tiếp tục.

Phần tử được định vị tuyệt đối làm mất vị trí cũ

Định vị tuyệt đối trở nên thực tế hơn nhiều khi nó liên quan đến một số phần tử khác trong dòng tĩnh của trang. May mắn là, có một cách để thay đổi hệ tọa độ của một phần tử được định vị tuyệt đối.

Kết hợp định vị tuyệt đối phần tử với phần tử định vị tương tối

Nó chỉ định vị theo trình duyệt khi không có phần tử cha được chỉ định. Vì vậy, nếu chúng ta thay đổi phần tử cha của .item-absolute là vị trí tương đối (position: relative;), nó sẽ xuất hiện ở góc trên bên trái của phần tử cha thay vì cửa sổ trình duyệt.

.absolute {
  position: relative;
}

Điều này rất tốt, bởi vì nếu chúng ta muốn thay đổi dòng chảy bình thường của container, giả sử, bố cục trên thiết bị di động, mọi phần tử được định vị tuyệt đối sẽ tự động di chuyển theo nó.

Phần tử được định vị tuyệt đối với phần tử định vị tuyệt đối sẽ di chuyển theo nó

Lưu ý cách chúng ta không chỉ định tọa độ offset nào cho phần tử .absolute. Chúng ta sử dụng positon: relative cho mục đích duy nhất là để cho phần tử absolute của chúng ta quay trở lại dòng chảy bình thường của trang.

Đây là cách chúng ta kết hợp an toàn position: absolute; (định vị tuyệt đối) với định vị tĩnh.

5. Cố định vị trí (Fixed Positioning)

Sự khác biệt chính là phần tử cố định không bị cuộn mất mà được dính khi cuộn trang.

Phần tử được cố định vị trí

.item-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Điều này cho phép bạn tạo gắn thanh điều hướng đó luôn luôn ở trên màn hình, cũng như các popup, nút gọi ngay hoặc icon chat luôn hiện trên màn hình.