Lưu trữ cho từ khóa: Relative

Học CSS cơ bản – Bài 14

Định vị trí các phần tử

Bằng CSS, bạn có thể định vị trí các phần tử ở bất cứ nơi nào mong muốn trên trang. Với những gì đã học được ở bài 13, nó sẽ mở ra cho bạn nhiều cơ hội để nâng cao khả năng dàn trang chính xác và chi tiết như mong muốn.

Trong bài này, chúng ta sẽ học các phần:

Các thức định vị trong CSS

Bạn hãy tưởng tượng một cửa sổ trình duyệt sẽ là một hệ thống tọa độ như bên dưới:

figure017

CSS có thể định vị các phần tử (mô hình hộp) ở bất cứ nơi nào trên trang

Giả sử bạn muốn sắp xếp vị trí cho một tiêu đề . Nó sẽ được xem như một chiếc hộp như bên dưới:

figure018

Bây giờ bạn muốn nó có vị trí cách 100px từ lề trên của trang và 200px từ lề trái của trang, bạn có thể viết đoạn  CSS như sau:

h1 {
     position:absolute;
     top: 100px;
     left: 200px;
    }

Kết quả sẽ được như sau:

figure019

Như các bạn đã thấy định vị bằng CSS vô cùng chính xác và dễ dàng hơn cách cũ sử dụng bằng table trước đây.

Vị trí tuyệt đối – Absolute

Một phần tử được định vị trí tuyệt đối – absolute có nghĩa là nó sẽ không chiếm bất cứ khoảng không nào của trang. Bạn hãy tưởng tượng các phần tử có giá trị  absolute sẽ là một lớp nằm bên trên bề mặt tọa độ, nên khoảng trống bên dưới nó không bị chiếm.

Thuộc tính position sẽ được gán giá trị là  absolute nếu bạn muốn phần tử đó có vị trí tuyệt đối. Bạn sử dụng các thuộc tính trái – left, phải – right,trên – top, và đáy – bottom để xác định vị trí chính xác của mô hình hộp so với các lề của trang.

Vi dụ dưới đây cho ta 4 mô hình hộp nằm ở 4 góc của trang:

#box1 {
    position:absolute; 
    top: 50px;
    left: 50px;
    }

#box2 {
    position:absolute; 
    top: 50px;
    right: 50px;
   }

#box3 {
    position:absolute; 
    bottom: 50px;
    right: 50px;
    }

#box4 {
   position:absolute; 
   bottom: 50px;
   left: 50px;
  }

XEM VÍ DỤ

Vị trí tương đối – Relative

Để định vị trí tương đối, thuộc tính position sẽ được thiết lập là relative. Sự khác nhau giữa vị trí tuyệt đối – absolute và tương đối – relative nằm ở chổ cách thức tính vị trí của từng giá trị.

Vị trí tương đối của một phần tử được tính từ vị trí nguyên gốc hiện tại của nó trên trang. Điều này có nghĩa là bạn sẽ định vị phần tử sang trái, phải, lên hoặc xuống dựa theo vị trí hiện tại của nó trên trang, và nó sẽ chiếm một khoảng không cần thiết.

Bạn hãy tham khảo ví dụ bên dưới và cách mà các phần tử để lại khoảng trống khi được định vị tương đối:

#box1 {
      position:relative;
      left: 150px;
      bottom: 10px;
      }
#box2 {
      position:relative;
      left: 50px;
      bottom: 5px;
 }
#box3 {
      position:relative;
      left: 450px;
      bottom: 30px;
 }

XEM VÍ DỤ

Tổng kết

Với tất cả những gì đã học các bài về float position, absolute possition, relative position, bây giờ bạn có thể dàn trang, thiết kế web của bạn theo đúng ý đồ một cách chính xác, chi tiết và dễ dàng sửa đổi sau này. Trong bài kế tiếp, chúng ta sẽ học về các lớp – layer, một thủ thuật sẽ giúp việc dàn trang lên một tầm cao mới.