Tùy chỉnh vị trí với Position và Absolute – Relative

Trong CSS, khi bạn di chuyển bất cứ một phần tử nào bằng các thuộc tính về Box Model như margin hoặc float thì các phần từ bên cạnh nó đều sẽ bị ảnh hưởng. Ví dụ bạn sử dụng margin để chuyển phần tử A thì cái thằng bên cạnh nó cũng sẽ di chuyển theo và tất cả các phần tử khác đều sẽ bị ảnh hưởng theo.

Vậy nếu như bạn muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính position. Cái tên nói lên tất cả, position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác.

Các giá trị của thuộc tính position

Hiện tại position hỗ trợ cho một số giá trị như sau:

• relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu.

• absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.

• fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.

• static: Đưa phần tử về hiển thị theo kiểu mặc định.

Sau khi thiết lập một phần tử sử dụng position, chúng ta sẽ sử dụng thêm một số thuộc tính position để căn chỉnh vị trí của nó và giá trị là số kèm theo đơn vị, có 4 thuộc tính position là:

• top: Căn vị trí hiển thị của phần tử theo hướng từ trên xuống dưới. Giá trị càng cao thì phần tử càng thụt xuống dưới.

• bottom: Căn vị trí hiển thị của phần tử theo hướng từ dưới lên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao.

• left: Căn vị trí hiển thị từ trái sang phải. Giá trị càng cao thì phần tử sẽ càng thụt về bên phải.

• right: Căn vị trí hiển thị từ phải sang trái. Giá trị càng cao thì phần tử sẽ càng thụ về bên trái.

Ví dụ về kiểu relative

Ở ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo kiểu relative và dùng thuộc tính position để nó hiển thị đè lên văn bản.

Ví dụ về position:relative trong css

Ví dụ về kiểu absolute

Với absolute, mình phải có một phần tử mẹ là kiểu relative. Lúc này giá trị thấp nhất của nó sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng màu đỏ là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là kiểu absolute. Khi mình đưa các thuộc tính position về giá trị là 0 thì nó vẫn nằm trong phần tử mẹ.

Ví dụ về position: absolute

Ví dụ về kiểu fixed

Ở ví dụ này, mình sẽ tạo ra một cái danh sách, sau đó đưa các mục con bên trong thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi kéo thanh cuộn.

Ví dụ về position: fixed