CSS 09 – Định vị cho phần tử

0
18

Trong một website, mỗi khi chúng ta thiết lập các thuộc tính khoảng cách trong mô hình hộp Box model thì sẽ gây ảnh hưởng tới bố cục của website. Ví dụ có hai khối nằm cạnh nhau, nếu bạn đặt thuộc tính margin cho khối thứ nhất thì khối thứ hai cũng sẽ phải di chuyển và tất cả các khối khác cũng sẽ chịu ảnh hưởng. Đôi khi nếu bạn căn kích thước không chuẩn khi thiếp lập các thuộc tính khoảng cách ấy có thể làm vỡ giao diện website.

May mắn thay, thuộc tính position được ra đời để xử lý việc này, bạn có thể định vị , di chuyển các phần tử trong website mà không làm ảnh hưởng đến bố cục.

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

  • Static : Đây là giá trị mặc định của thuộc tính position, phần tử sẽ nằm tại vị trí theo thứ tự trong văn bản.
  • Fixed : Giá trị này khiến cho phần tử luôn cuộn theo thanh cuộn trang của trình duyệt.
  • Relative: Dùng để định vị vị trí của một phần tử HTML mà không làm ảnh hưởng tới việc hiển thị ban đầu.
  • Absolute: Dùng để định vị vị trí của một phần tử HTML so với phần tử cha có giá trị thuộc tính position là relative.

Sau khi thiết lập giá trị cho thuộc tính position chúng ta sử dụng thêm một vài thuộc tính position để căn chỉnh định vị cho phần tử. Giá trị của các thuộc tính này là đơn vị độ dài. Có 4 thuộc tính position dùng để định vị vị trí đó là :

  • Top : Định vị phía bên trên của phần tử
  • Bottom: Định vị phía bên dưới của phần tử
  • Left: Định vị phía bên trái của phần tử
  • Right: Định vị phía bên phải của phần tử

2. Ví dụ Fixed

Trong ví dụ này , tôi sẽ tạo ra một thanh menu, và một đoạn văn bản đủ dài để có thể xuất hiện thanh trượt. Và tôi sử dụng thuộc tính position với giá trị là fixed cho thanh menu ngang.

See the Pen vp_css_position_fixed_examp by Thien (@anhtomks) on CodePen.0

3. Ví dụ Relative

Trong ví dụ này tôi sẽ cho một đoạn văn bản đè lên khối div.

See the Pen vp_css_position_relative_examp by Thien (@anhtomks) on CodePen.0

4. Ví dụ Absolute

Trong ví dụ này tôi tạo ra hai khối div có kích thước bằng nhau. Sau đó tôi định vị khối div thứ hai theo khối div 1.

See the Pen vp_css_position_relative_examp by Thien (@anhtomks) on CodePen.0

 

Tác giả: Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here