Position: relative css la gì
Nếu bạn đang học cách sử dụng CSS cho trang web của mình, bạn có thể sử dụng Position trong CSS để thiết kế layout của bạn trông thật đẹp mắt. Vậy, Position trong CSS là gì? Tino Group sẽ giải đáp giúp bạn cũng với những ví dụ trực quan bằng code và hình ảnh để bạn thấy luôn nhé! Show
Position trong CSS được sử dụng để định vị vị trí hiển thị của các phần tử thẻ HTML và thường sử dụng để xây dựng CSS cho menu nhiều cấp, tooltip và một số chức năng khác liên quan đến vị trí. Các vị trí trong PositionCác vị trí trên 1 mặt phẳng như bạn đã biết bao gồm 4 vị trí chính: trên, dưới, trái, phải tương ứng ta sẽ có các vị trí Position như sau:
Tất nhiên, đây chỉ là những vị trí cơ bản nhất, khi thực hiện 1 layout, bạn sẽ phải căng chỉnh vị trí nhiều hơn nhiều bằng cách kết hợp cùng các thuộc tính Position trong CSS khác ví dụ như trong ảnh: Để hiểu một cách trực quan hơn, bạn nên thực hành. Nếu bạn ngại code lại từ đầu, bạn có thể truy cập vào link này và thực hành chỉnh sửa các thông số, vị trí của khối vuông nhé! 5 giá trị thuộc tính cơ bản của Position trong CSSThông thường chúng ta sẽ có 4 thuộc tính chính bao gồm: static, relative, fixed và absolute. Ngoài ra bạn sẽ thấy thêm các thuộc tính như: sticky và 2 thuộc tính khá thú vị khác là initial, inherit. Trong bài viết, Tino Group chỉ đào sâu giới thiệu về 5 thuộc tính: static, relative, fixed, absolute và sticky nhé!
Giải thích chi tiết các giá trị thuộc tính của Position trong CSSViệc giải thích sơ bộ vẫn sẽ rất khó để có thể hiểu và tưởng tượng ra. Sau đây, Tino Group sẽ giải thích chi tiết từng giá trị thuộc tính cùng ví dụ minh họa để bạn hiểu rõ và thực hành luôn nhé! Position staticPosition static hay vị trí mặc định, đồng nghĩa với việc vị trí của phần tử này được xác định theo quy tắc thông thường của các tài liệu. Bạn sẽ không thể sử dụng các thuộc tính CSS như: Top, Bottom, Left, Right để thiết lập vị trí cho phần tử đó.
QUẢNG CÁO Code ví dụ:
Và đây là kết quả khi chạy: Position relativePhần tử được định vị bằng Position relative sẽ nằm ở vị trí tương đối so với vị trí static. Bạn có thể sử dụng các CSS như: Top, Bottom, Left, Right để định vị vị trí của phần tử đó. Code mẫu:
Bạn sẽ có kết quả như sau: Khi sử dụng trình duyệt, bạn sẽ thấy kết quả như sau: Bạn có thể thấy rõ rằng: vị trí Top và Left của phần tử đã bị thay đổi. Tuy nhiên, việc thay đổi ở đây chỉ thay đổi vị trí của phần tử chứ không làm thay đổi kích thước của phần tử. Position fixedPhần tử được định vị bằng Position fixed sẽ có vị trí tương đối so với Viewport trên trình duyệt của bạn. Nghe có vẻ khó hiểu bạn có thể tham khảo Viewport trên trình duyệt Chrome tại đây: Code mẫu:
Bạn sẽ có được kết quả như sau: Bạn có thể thu nhỏ cửa sổ trình duyệt của mình lại và kéo phóng to thu nhỏ, bạn sẽ thấy phần tử màu vàng sẽ thay đổi vị trí theo cách bạn thu phóng cửa sổ trình duyệt. Một cách nói khác: bạn đang thực hiện neo cố định 4 cạnh của phần tử với 4 cạnh của trình duyệt bằng dòng code:
Bằng cách này, phần tử của bạn sẽ thay đổi vị trí của phần tử đó dựa theo vị trí của trình duyệt. Position absoluteĐối với một phần tử được định vị bằng Position absolute, phần tử sẽ tự động ưu tiên cho phần tử cha, ông gần nhất của chúng có chứa Position relative. Khi tìm thấy phần tử chứa Position relative, phần tử được định vị bằng Position absolute sẽ tự động tạo vị trí tương đối so với phần tử đó. Nếu không, phần tử định vị bằng Position absolute sẽ lấy vị trí tương đối so với Viewport trên trình duyệt của bạn. Code ví dụ:
Kết quả bạn có: Khi bạn để nguyên phần tử màu vàng sẽ thiết lập vị trí tương đối so với phần tử cha mau đỏ. Đến khi bạn thu nhỏ cửa sổ lại và chèn một đoạn dưới của phần tử màu đỏ, lúc này phần tử màu vàng sẽ thiết lập vị trí tương đối của nó so với Viewport của trình duyệt. Position stickyPhần tử được định vị bằng Position sticky sẽ thay đổi vị trí dựa trên thao tác cuộn của người dùng. Với Position sticky, phần tử sẽ linh động chuyển từ trạng thái relative sang fixed và ngược lại. Position sticky khá thú vị đấy bạn nhỉ! Bạn có thể thực hành với dòng code cơ bản như sau: menu sẽ thay đổi theo. Bạn có thể thực hành với dòng code cơ bản như sau:
Bạn sẽ có kết quả như sau: Thanh màu xanh có dòng chữ Tui là cái sticky! sẽ thay đổi vị trí khi bạn cuộn con lăn của bạn. Bạn có thể thay đổi chữ và thực hành tại đây. Qua bài viết, Tino Group đã giải đáp thắc mắc về Position trong CSS là gì, cũng như đưa ra từng ví dụ cho từng thuộc tính trực quan nhất để giúp bạn có thể sử dụng Position trong CSS một cách hiệu quả nhất. Tino Group chúc bạn trở thành một bậc thầy sáng tạo và thiết kế web bằng CSS nhé! Bài viết tham khảo từ các nguồn: W3Schools , Mozilla, Kipalog và Open Planning. Những câu hỏi thường gặp về Position trong CSSNên học về Position trong CSS và học CSS ở đâu?Tino Group gợi ý cho bạn 2 trang sau để học cách code trực quan, hiệu quả cùng nhiều ngôn ngữ liên quan một cách hoàn toàn miễn phí là: W3Schools và Open Planning. Đối với W3Schools bạn sẽ cần phải biết một chút tiếng Anh để có thể học tốt nhất. Nếu bạn muốn sử dụng ngôn ngữ tiếng Việt, bạn có thể học ngay tại Open Planning nhé! Vì sao Menu Sticky lại không hoạt động?Nếu bạn chắc chắn đã code chính xác, khả năng cao là do trình duyệt của bạn không hỗ trợ Menu Sticky, 2 trình duyệt của Microsoft là Internet Explorer và Edge phiên bản 15 trở xuống không hỗ trợ bạn sử dụng Position sticky. Layout là gì?Layout có thể hiểu đơn giản đó chính là sắp xếp vị trí của các phần tử trên trang web của bạn sao cho thật đẹp mắt. Bạn có thể tìm hiểu thêm về Layout tại đây. Làm sao để căn giữa 1 dòng text trên bức ảnh?Để căn giữa text trong bức ảnh, bạn có thể sử dụng thẻ thuộc tính center. Bạn có thể copy code và lưu lại với định dạng html và chạy bằng trình duyệt: .container { position: relative; } .center { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } Image TextDòng text chính giữa ảnh: Centered CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
|