Với thuộc tính position chúng ta có 5 giá trị chính cần biết:Static: Đây được xem là giá trị hiển thị Position trong css một cách mặc định (default), các thành phần sẽ nằm theo thứ tự của văn bản. Show
Relative: Định vị trí tuyệt đối cho các thành phần, không gây ảnh hưởng tới vị trí ban đầu hay các thành phần khác. Absolute: Giá trị này sẽ giúp định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài, hoặc ít nhất là 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. Fixed: Định vị và giúp cho phần tử luôn cố định một chỗ, ví dụ như khi bạn scroll trình duyệt chẳng hạn, phần tử sẽ không thay đổi. 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). Trước hết hãy nói về thuộc tính position relative, absolute và các thuộc tính cool ngầu khácThuộc tính Position RelativeThuộc tính position: relative trong CSS giúp Định vị trí tuyệt đối cho các thành phần. Ví dụ: selector{position: relative;} Nếu bạn sử dụng thuộc tính này thì sẽ phải sử dụng kèm theo với các thuộc tính căn chỉnh tọa độ của thành phần (lưu ý: các giá trị của các thẻ này là chính là đơn vị đo như px). Top: là cách trên, Bottom: là cách dưới, Left: là cách trái, Right: là cách phải. Hãy cùng nhìn qua đoạn code ví dụ sau đây: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Thuộc tính position trong CSS</title> </head> <style type="text/css" media="screen"> div { padding: 40px; margin: 20px; width: 320px; border: 2px solid red; } </style> <body> <div>TopDev tuyen dung IT hang dau.</div> <div class="relative">TopDev tuyen dung IT hang dau.</div> <div>TopDev tuyen dung IT hang dau.</div> </body> </html>0Mọi người có thể test thử và thấy rằng các thẻ hiển thị đúng thứ tự, giờ ta có thể thêm đoạn CSS vào class relative như sau: .relative {position: relative; /Cách bên trái 260px/ left: 260px; /Cách bên trên 290px/ top: 290px; background-color: #e1ab22; }Lưu ý, khi bạn bù một vị trí phần tử với position: relative, không gian nó chiếm không di chuyển, vị trí hiện tại của nó sẽ khiến đổi bố cục xung quanh vị trí đó không thay đổi…Tưởng tượng như thế này, position: relative giống như nhân vật có khả năng di chuyển tự do, nhưng luôn luôn liên quan đến nơi ban đầu.  Thuộc tính Position AbsoluteNhư đã nói ở trên thuộc tính position: absolute trong CSS có tác dụng giúp định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài, hoặc ít nhất là theo cửa sổ trình duyệt.Cụ thể hơn, thuộc tính absolute xác định định tọa độ của thành phần theo một thẻ cha relative (nếu có), Nếu không có thẻ cha thì nó sẽ đi theo body của toàn trang web. Cách sử dụng cũng tương tự như relative. Dưới đây là ví dụ tương tự như bên trên thay vào đó là thẻ absolute. Các bạn sẽ thấy rõ rằng khi chúng ta di chuyển các thành phần bằngabsolute thì các thẻ tiếp theo sẽ được đưa lên vị trí mặc định. Bạn có thể thử ngay nhé. .absolute { position: absolute; /Cách bên trái 260px/ left: 260px; /Cách bên trên 290px/ top: 290px; background-color: #e1ab22; }Thuộc tính Position StaticThuộc tínhposition: staticđược xem là giá trị mặc định (default) của position. Đây là các giá trị mà dù bạn có khai báo chúng hay không khai báo thì các phần tử (element) sẽ tự được sắp xếp vị trí một cách như bình thường trên trang web. Bạn có thể nhìn vào ví dụ sau <body> <div class="box-red"></div> <div class="box-green"></div> </body>Bạn có thể thử thêm position static như sau: // Đây là khi bạn không khai báo position .box-orange { background: Green; height: 250px; width: 250px; } .box-blue { background: grey; height: 250px; width: 250px; position: static; } //*Sau khi bạn đã khai báo staticSASS/SCSS là gì? Sử dụng CSS content như thế nào cho đúng Thuộc tính Position FixedThuộc tính thường được các lập trình viên dùng để định vị một thành phần so với window hiển thị của các trình duyệt. Bạn có thể thấy ví dụ này, khi vào một website nào đó và bạn thử scroll browser, bạn sẽ thấy menu hay button cứ đứng yên một chỗ không thay đổi thì đó chính là position fixed. Giá trị này hoàn toàn không phụ thuộc vào phần tử cha, khi nào scroll trình duyệt là nó hoạt động thôi. Bạn có thể thử tham khảo ví dụ sau đây: .header { margin-top: 0px; text-align: center; position: fixed; top: 0px; width: 100%; background: #e1ab22; }Thuộc tính Position StickyĐây là một thuộc tính khá tương đồng với fixed, bạn có thể xem nó như một sự kết hợp “lưỡng long nhất thể” của relative và fixed.Vì có sự lai tạo này nên nó cũng không được hỗ trợ quá nhiều trong cộng đồng làm web. Nó cũng không sử dụng được trên trình duyệt Internet Explorer cũng như một số phiên bản đầu của Edge nên sẽ dễ gây lỗi. Không khuyến khích các lập trình viên sử dụng 1. Position relative và absolutetrong CSSTa có thể ví relative như một cái khungvà absolute là một hòn bi di chuyển bên trong cái khung nên nó có thể lăn tới bất kìvị trí nào, thậm chí nó có thể lăn ra bên ngoài khung. Và để thiết lập vị trí thì ta sử dụng bốn thuộc tính sau:
Bạn chỉ có thể sử dụng nhiều nhất là 2 giá trị liền kề nhau tuân theo tọa độ đề cát, các cặp đó là: (top,right) - (right, bottom) - (bottom, left) - (left,top). Lưu ý: Vì các giá trị (top, left, right, bottom) nằm trongtọa độ đề cát và tâm chính là các một trong những góc vuông (tùy vào cách chọn cặp)nên nếu nó mang số âm thì đối tượng HTML sẽ nằm ngoài khung. Giả sử có ba thẻ HTMLcấp 1, cấp 2, cấp 3, nếu thẻ cấp 3 là relative và thẻ cấp 2 cũng relative thì lúc này thẻ cấp 1 nếu khai báo là absolute thì nò sẽ chọnkhunglà thẻ có khai báo relative gần nó nhất và thẻ đó chính là thẻ cấp 2. Ví dụ: Xây dựng HTML như hình sau: XEM DEMO Nếu chúng ta sử dụng float và margin để làm bài này vẫn được nhưng rất phức tạp. Nhưng nếu sử dụng position và các thuộc tính bổ trợ (top, left, bottom, right)thì nó quá đơn giản. HTML: Chúng ta tạo một thẻ div ngoài cùng và position của nó là relative, còn ba ô nhỏ bên trong ta cũng tạo 3 thẻ div và position của nó là absolute nê nó sẽ lấy thẻ div ngoài cùnglàm khung. <div class="relative"> <div class="absolute red"></div> <div class="absolute yellow"></div> <div class="absolute white"></div> </div> CSS: Chúng ta viết CSS cho các class trong đoạn mã HTML trên. .relative{ height: 300px; width: 300px; position: relative; margin: 100px auto; background: blue; } .absolute{ position: absolute; height: 40px; width: 40px; } .red{ top: 200px; left: 100px; background: red; } .yellow{ top: 100px; left: 200px; background: yellow; } .white{ top: 150px; left: 250px; background: white; } Trường hợp chúng ta không khai báo thẻ ngoài cùng là relative thì giao diện sẽ vỡ như sau: XEM DEMO Lý do là nó không tìm thấy thẻ cha nào được khai báo relative nên nó sẽ lấy thẻ body làm khung. Giá trị của thuộc tính position trong cssThuộc tính position hiện tại có những giá trị thường được dùng sau:
Và đi kèm với thuộc tính position thì đó là các thuộc tính dùng để căn chỉnh vị trí cho phần tử
Đọc xong thấy có vẻ khó hiểu nhỉ. Chắc chắn là vậy rồi. Đọc không mà. Vì thế mình có làm ví dụ từng thuộc tính một cho các bạn xem đây. 1- CSS Position
CSS Position được sử dụng để thiết lập "cách một phần tử được định vị trên tài liệu". Có 5 phương thức khác nhau để định vị một phần tử trên tài liệu:
Sau khi một phần tử được định vị bởi 1 trong 5 cách ở trên các thuộc tính (property) top, right, bottom, right mới được sử dụng đến.
Thuộc tính 'position' trong CSS
This post hasn't been updated for 2 years Việc sắp xếp vị trí các element của trang web không dễ dàng như mọi người thường nghĩ, mọi thứ có thể trở nên phức tạp hơn rất nhiều khi trang web của bạn có nhiều element khác nhau. Do đó, điều cần thiết là phải biết cách sử dụng CSS để sắp xếp vị trí các element, từ đó cũng sẽ tiết kiệm thời gian code của chúng ta hơn. Có nhiều cách / phương pháp khác nhau để sắp xếp các element và dàn trang web. Sử dụng Bootstrap là một cách rất tốt và nhanh gọn, tuy nhiên không phải tất cả các dự án đều sử dụng Bootstrap. Trong bài viết này, mình sẽ giải thích một trong những cách sắp xếp các element với CSS thuần: thuộc tính position. Ngoài ra chúng ta có thể dùng thuộc tính Display với các giá trị như flex, grid, inline-block ... Hôm nay mình sẽ chỉ nói về thuộc tính position nhé ! Tìm hiểu về Position trong CSS
This post hasn't been updated for 2 years Hiểu về thuôc tính position trong CSS có thể là một trong những trải nghiệm khó khăn cho chúng ta khi khi bắt đầu. Nó là thuộc tính xác định loại của phương pháp định vị trí cho thành phần. Cấu trúc: tag { position: giá trị; }Có 2 loại positioningStatic positioning và relative positioning Static positoning chỉ có một giá trị: position: static. Nó là mặc định nên sẽ ít khi thấy nó được khai báo. Relative positioning bao gồm các giá trị: relative, absolute, fixed. Các giá trị này tương tác với nhau và cho phép bạn di chuyển các yếu tố xung quanh theo những cách thú vị. Static PositioningMặc dù không thường xuyên nhưng thỉnh thoảng bạn sẽ thấy nó được khai báo: .tag { position: static; }Static position là position mặc định của mọi thành phần, bất kể bạn khai báo hay không. Tất cả các thành phần sẽ nằm theo thứ tự trong document. Relative PositioningCác gía trị của nó là: relative, fixed, absolute, Nó cho phép các thành phần được xác định vị trí của chính chùng với các thuộc tính bố me, trình duyệt... Tất cả loại relative positoning có làm như sau: . Được di chuyển thông qua việc sử dụng offset properties, đó là: top, left, right, bottom. . Chúng ta tạo relative-position , nó cho phép thành phần con với position: absoluteđược định vị tương đối với vị trí của yếu tố này. Positon RelativeCấu trúc: tag { positon: relative; }Yếu tố: position: relative của một phần tử liên quan đến vị trí hiện tại của nó mà không thay đổi bố cục xung quanh vị trí đó. Để rõ ràng, khi bạn sử dụng một offset để di chuyển trực quan một phần tử có position: relative, không gian mà nó chiếm trong document sẽ không di chuyển. Hãy xem ví dụ: .ourBox { position: relative; top: 20px; left: 20px; }Ở đây chúng ta có thể thấy phần trên của phần tử được bù 20 pixel, liên quan đến vị trí của phần tử trong luồng thông thường. Điều tương tự đang được áp dụng cho phía bên trái. Lưu ý rằng vị trí của các hộp ở hai bên không thay đổi. Hãy nhớ rằng, khi bạn bù một vị trí phần tử với position: relative, không gian nó chiếm không di chuyển, vì vậy nó sẽ giành được ảnh hưởng đến mọi thứ xung quanh nó. Nó giống như chiếc hộp của chúng tôi có một tinh thần tự do và có thể đi bất cứ nơi nào nó muốn, nhưng luôn luôn liên quan đến nơi ban đầu. Position Absoluteposition: absolute của một phần tử liên quan đến vị trí của bố mẹ và thay đổi bố cục xung quanh vị trí đó. Hãy xem ví dụ sau: .ourBoxesParent { position: relative; } .ourBox { position: absolute; top: 0; left: 0; }Chúng ta đã thêm một set vị trị của box position: relative. Chúng ta cũng đã thay đổi bõ của chúng ta để được position: absolute. Bây giờ 2 box sẽ xuất hiên cạnh nhau. Position Fixedfixed giống như absolute nhưng có một điểm chính khác nhau: Phần tử được định vị tương đối với khung nhìn. .ourBox { position: fixed; top: 0; left: 0; }Phần tử được định vị tương đối với chế độ xem. Điều này có nghĩa là ngay cả khi trang được cuộn, thì nó sẽ nằm luôn trên màn hình ngay tại vị trí chuẩn đó và đè lên trên các phần tử bên dưới. |
