Các giá trị thuộc tính position trong CSS

Thuộc tính position là gì

Khi bạn di chuyển bất kỳ phần tử nào trong CSS bằng các thuộc tính như margin hoặc float thì các phần tử bên cạnh nó đều sẽ bị ảnh hưởng theo. Nếu bạn sử dụng margin để chuyển phần từ Y thì phần tử bên cạnh của nó cũng di chuyển theo, rồi các phần tử khác cũng sẽ bị ảnh hưởng theo cùng. Vì vậy nếu bạn muốn di chuyển bất kỳ phần tử nào mà không làm ảnh hưởng đên bố cục của một trang web thì giải pháp chính là sử dụng thuộc tính position. Thuộc tính này giúp bạn tùy chỉnh khu vực hiển thị cho phần tử nhưng không làm ảnh hưởng hay di chuyển các phần tư còn lại.

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

– Giá trị relative: gia trị này dùng để thiết lập một phần tử sử dụng thuộc tính position mà không tác động đến việc hiển thị ban đầu.

– Giá trị absolute: được dùng thiết lập vị trí của một phần từ, điểm đáng chú ý là nó nằm trong phần từ mẹ là relative.

– Giá trị fixed: có nghĩa là hiển thị luôn đi theo trình duyệt khi người dừng thực hiện cuộn trang.

– Giá trị static: có tác dụng đưa phần tử trở hiển thị theo kiểu mặc định ban đầu.

Khi đã thiết lập xong các phần tử sử dụng postion, chúng ta sẽ sử dụng thêm một số thuộc tính khác để căn chỉnh lại vì trí của nó, giá trị là số kèo theo các đơn vị, bao gồm các thuộc tính bên dưới:

– Thuộc tính top: căn chỉnh vị trí hiển thị của một phần tử bất ký theo hướng từ trên đi xuống, giá trị càng cao thì phần tử các tụt sâu xuống dưới. Cái này giống như trong word, đánh máy xong thì phải căn chỉnh, ai từng thực hiện căn chỉnh trên word thường xuyên sẽ dễ hình dùng ra ngay.

– Thuộc tính botton: ngược lại thuộc tính top là thuộc tính bottom, tức là căn chỉnh vị trí hiển thị của phần tử theo hướng từ dưới lên bên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao, giá trị thấp thì phần tử hiện thị sát đáy.

– Thuộc tính left: thuộc tính này có tác dụng căn vị trí hiển thị của phần từ trái sang phải, giá trị càng cao thị càng hướng về bên phải.

– Thuộc tính right: thuộc tính này có tác dụng căn chỉnh vị trí từ phải sáng trái, giá trị càng cao thì phần tử càng hướng về bên trái và ngược lại.