Trước khi tìm hiểu về position chúng ta nói một số vấn đề khác trước nhé. Trong CSS, khi bạn di chuyển bất kì một phần tử nào bằng các thuộc tính về Box Model như padding, margin hoặc float thì các phần tử đứng cạnh nó đều bị ảnh hưởng. Ví dụ khi bạn sử dụng margin để chuyển phần tử A thì thằng bên cạnh nó cũng sẽ di chuyển theo và các phần tử khác đều bị ảnh hưởng theo.
Vậy dùng giải pháp gì để di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục website? Khi đó chúng ta phải sử dụng thuộc tính position. Chính cái tên của nó đã nói lên tất cả, position là thuộc tính giúp bạn tuỳ chỉnh khu vực hiển thị cho phần tử và việc này không hề ảnh hưởng đến các phần tử khác.
Những giá trị của thuộc tính position
Một số giá giạ mà position hỗ trợ như sau:
relative: Được dùng để thiết lập phần tử sử dụng các thuộc tính position mà không làm ảnh hưởng đến việc hiển thị các thuộc tính ban đầu. (xem ở ví dụ bên dưới)absolute: Dùng để thiết lập vị trí một phần tử và phần tử đó sẽ luôn nằm trong một phần tử mẹ đang là relative.fixed: Hiển thị cuộn theo thanh thanh cuộn trang của trình duyệt.static: Hiển thị phần tử theo kiểu mặc định.
Sau khi thiết lập một phần tử sử dụng thuộc tính position, chúng ta có thể sử dụng thêm một số thuộc tính position để căn chỉnh vị trí của phần tử đó và giá trị là số kèm theo đơn vị, có 4 thuộc tính position là:
top: Căn chỉnh vị trí hiển thị của phần tử hướng từ trên xuống dưới. Giá trị top của phần tử càng cao thì phần tử càng thụt xuống dưới.bottom: Căn chỉnh vị trí hiển thị của phần tử hướng từ dưới lên trên. Ngược lại với top, giá trị bottom của phần tử càng cao thì phần tử càng hiển thị lên cao.left: Căn chỉnh vị trí phần tử hiển thị từ trái sang phải. Giá trị left của phần tử càng cao thì phần tử sẽ càng thụt về bên phải.right: Căn chỉnh vị trí phần tử hiển thị từ phải sang trái. Ngược lại với left, giá trị right của phần tử càng cao thì phần tử sẽ càng thụ về bên trái.
Ví dụ về relative:
Ví dụ này mình sẽ cho cái ảnh kiểu relative và dùng position để cho nó đè lên trên văn bản.
Ví dụ về kiểu absolute
Với absolute, chúng ta bắt buộc phải có một phần tử mẹ là kiểu relative để nó mới hiểu phần tử này là absolute. Và lúc này giá trị thấp nhất của phần tử absolute sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng màu xanh lam là vùng được thiết lập kiểu relative, và thêm một hình ảnh mình sẽ để là kiểu absolute. Khi mình thiết lập 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ề kiểu fixed
Trong trường hợp này, mình sẽ tạo ra một danh sách, sau đó đưa các mục con bên trong thành kiểu inline và position kiểu fixed để nó cuộn xuống theo trình duyệt khi kéo thanh cuộn xuống.
Lời kết
Việc mình giải thích cặn kẻ về position như vậy có phải nó rất quan trọng không? Thực sự, thuộc tính position nó khá là quan trọng sau này, cụ thể là trước mắt ở một bài viết nào đó mình sẽ hướng dẫn cho các bạn một vài kỹ thuật làm menu đa cấp và mình sẽ sử dụng thuộc tính position rất nhiều. Và muốn nó hiển thị tốt hay không quạn trọng ở bạn có sử dụng đúng kiểu postion hay không. Và một lý do nữa là nếu bạn đang theo ngành thiết kế website thì việc sử dụng thuần thục postion sẽ tốt cho những dự án của bạn sau này. Onlycssmenu chúc các bạn thành công!