Postion trong CSS

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:

Link 1Link 2Link 3

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>

Link 1Link 3

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.