Tìm hiểu về ý nghĩa của các giá trị trong thuộc tính Position và Absolute – Relative bao gồm fixed, static, relative và absolute. Đây là một kỹ thuật rất quan trọng để xây dựng các chi tiết nhỏ trong website.
MỤC LỤC
https://www.youtube.com/watch?v=aY-5hB1RCvs&feature=youtu.be
Trong CSS, khi bạn di chuyển bất cứ một phần tử nào bằng các thuộc tính về Box Model như margin hoặc float thì các phần từ bên cạnh nó đều sẽ bị ảnh hưởng. Ví dụ bạn sử dụng margin để chuyển phần tử A thì cái thằng bên cạnh nó cũng sẽ di chuyển theo và tất cả các phần tử khác đều sẽ bị ảnh hưởng theo.
Vậy nếu như bạn muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính position. Cái tên nói lên tất cả, position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác.
Các giá trị của thuộc tính position
Hiện tại position hỗ trợ cho một số giá trị như sau:
relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu.absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.static: Đưa phần tử về hiển thị theo kiểu mặc định.
Sau khi thiết lập một phần tử sử dụng position, chúng ta sẽ sử dụng thêm một số thuộc tính position để căn chỉnh vị trí của nó và giá trị là số kèm theo đơn vị, có 4 thuộc tính position là:
top: Căn vị trí hiển thị của phần tử theo hướng từ trên xuống dưới. Giá trị càng cao thì phần tử càng thụt xuống dưới.bottom: Căn vị trí hiển thị của phần tử theo hướng từ dưới lên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao.left: Căn vị trí hiển thị từ trái sang phải. Giá trị càng cao thì phần tử sẽ càng thụt về bên phải.right: Căn vị trí hiển thị từ phải sang trái. Giá trị càng cao thì phần tử sẽ càng thụ về bên trái.
Ví dụ về kiểu relative
Ở ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo kiểu relative và dùng thuộc tính position để nó hiển thị đè lên văn bản.
Ví dụ về kiểu absolute
Với absolute, mình phải có một phần tử mẹ là kiểu relative. Lúc này giá trị thấp nhất của nó sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng màu đỏ là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là kiểu absolute. Khi mình đưa 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
Ở ví dụ này, mình sẽ tạo ra một cái danh sách, sau đó đưa các mục con bên trong thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi kéo thanh cuộn.
Lời kết
Với nội dung Position và Absolute – Relative. tại sao mình lại giải thích cặn kẽ về position như vậy, nó quan trọng lắm sao? Khá là quan trọng sau này, mà cụ thể là trước mắt ở phần sau mình sẽ bày cho bạn một vài kỹ thuật làm menu đổ xuống có phân cấp và trong đó sẽ sử dụng thuộc tính position rất nhiều và nó hiển thị tốt hay không là quan trọng bạn có thiết lập đúng kiểu position hay không. Và tương lai bạn còn dùng nhiều nữa nên hãy nắm rõ ngay từ bây giờ. Chúc các bạn học CSS vui vẻ!
Website FAQ » Hỏi đáp thiết kế web » Hỏi đáp lập trình web » Học CSS » Hỏi đáp lập trình CSS
Hoi dap thiet ke web / Hoi dap lap trinh web / Hoi dap lap trinh PHP / Hoi dap lap trinh HTML / Hoi dap lap trinh CSS / Hoi dap lap trinh Javascript / Hoi dap lap trinh MySQL / Hoi dap SEO / Tai lieu thiet ke web / Tai lieu lap trinh web / Huong dan hoc CSS
