Vị trí tương đối trong công cụ galil là gì? Giá trị cố định: định vị cố định. Mở gói các phần tử
Hai công cụ chính thường được sử dụng để bố trí trang - định vị Và chuyển động tự do (nổi). Định vị CSS cho phép bạn chỉ định vị trí hộp của phần tử xuất hiện và phần nổi tự do sẽ di chuyển các phần tử sang cạnh trái hoặc phải của hộp chứa, cho phép phần còn lại của nội dung "chảy" xung quanh nó.
Định vị và chuyển động tự do của các phần tử
1. Các kiểu định vị
Thuộc tính vị trí cho phép bạn chỉ định chính xác vị trí mới của khối so với vị trí của nó trong luồng tài liệu thông thường. Theo mặc định, tất cả các phần tử được sắp xếp tuần tự lần lượt theo thứ tự chúng được xác định trong cấu trúc của tài liệu HTML. Tài sản không được thừa kế.
| chức vụ | |
|---|---|
| Nghĩa: | |
| tĩnh | Giá trị mặc định có nghĩa là không có vị trí. Các phần tử được hiển thị tuần tự lần lượt theo thứ tự chúng được xác định trong tài liệu HTML. Được sử dụng để xóa bất kỳ giá trị định vị nào khác. |
| liên quan đến | Một phần tử có vị trí tương đối được di chuyển khỏi vị trí bình thường của nó theo các hướng khác nhau so với ranh giới vùng chứa gốc và không gian mà nó chiếm giữ không biến mất. Tuy nhiên, thành phần như vậy có thể chồng lên nội dung khác trên trang. Nếu đối với một phần tử được định vị tương đối, bạn đặt các thuộc tính trên và dưới hoặc trái và phải cùng một lúc, thì trong trường hợp đầu tiên, chỉ trên cùng mới hoạt động, trong trường hợp thứ hai - bên trái. Định vị tương đối cho phép bạn đặt chỉ mục z cho một phần tử, cũng như định vị tuyệt đối các phần tử con trong một khối. |
| tuyệt đối | Một phần tử được định vị tuyệt đối sẽ bị xóa hoàn toàn khỏi luồng tài liệu và được định vị so với ranh giới của khối vùng chứa của nó (phần tử khác hoặc cửa sổ trình duyệt). Khối chứa cho phần tử được định vị tuyệt đối là phần tử tổ tiên gần nhất có giá trị thuộc tính vị trí không phải là tĩnh. Vị trí các cạnh của phần tử được xác định bằng cách sử dụng thuộc tính offset. Không gian mà phần tử đó chiếm giữ sẽ sụp đổ như thể phần tử đó không tồn tại trên trang. Một phần tử được định vị tuyệt đối có thể chồng lên nhau hoặc bị chồng lên bởi các phần tử khác (do thuộc tính z-index). Bất kỳ phần tử nào được định vị tuyệt đối đều tạo ra một khối, nghĩa là nó nhận giá trị display: block; . |
| đã sửa | Sửa một phần tử tại một vị trí được chỉ định trên trang. Khối chứa của một phần tử cố định là khung nhìn, tức là phần tử luôn được cố định so với cửa sổ trình duyệt và không thay đổi vị trí của nó trong khi cuộn trang. Bản thân phần tử này đã bị xóa hoàn toàn khỏi luồng tài liệu chính và được tạo trong luồng tài liệu mới. |
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
Cơm. 1. Sự khác biệt giữa định vị tĩnh, tương đối và tuyệt đối 2. Thuộc tính offset
Các thuộc tính mô tả phần bù so với cạnh gần nhất của khối container. Đặt cho các phần tử có giá trị thuộc tính vị trí không phải là tĩnh. Họ có thể nhận cả giá trị tích cực và tiêu cực. Không được thừa kế.
Đối với thuộc tính top, các giá trị dương di chuyển cạnh trên của phần tử được định vị bên dưới và các giá trị âm di chuyển cạnh trên của khối chứa nó. Đối với thuộc tính left, các giá trị dương sẽ di chuyển cạnh của phần tử được định vị sang bên phải và các giá trị âm sẽ di chuyển cạnh của phần tử được định vị sang trái. Nghĩa là, các giá trị dương di chuyển phần tử bên trong khối vùng chứa và các giá trị âm di chuyển phần tử ra bên ngoài khối chứa.
3. Định vị trong một phần tử
Đối với khối chứa của một phần tử được định vị tuyệt đối, thuộc tính vị trí: tương đối được đặt mà không có phần bù. Điều này cho phép các phần tử được định vị trong phần tử vùng chứa.
Cơm. 2. Tuyệt đối định vị tương đối
4. Vấn đề về định vị
1. Nếu chiều rộng hoặc chiều cao của một phần tử được định vị tuyệt đối được đặt thành auto thì giá trị của nó sẽ được xác định bởi chiều rộng hoặc chiều cao của nội dung phần tử. Nếu chiều rộng hoặc chiều cao được khai báo rõ ràng thì đây là giá trị sẽ được gán.
2. Nếu bên trong một khối có vị trí: tuyệt đối có các phần tử được đặt float, thì chiều cao của phần tử này sẽ bằng chiều cao của phần tử cao nhất trong số các phần tử này.
3. Đối với một phần tử có vị trí: tuyệt đối hoặc vị trí: cố định, bạn không thể đặt đồng thời thuộc tính float, nhưng đối với một phần tử có vị trí: tương đối, bạn có thể.
4. Nếu tổ tiên của phần tử được định vị là một phần tử khối, thì vùng chứa khối được hình thành bởi vùng nội dung được phân cách bằng đường viền. Nếu tổ tiên là một phần tử nội tuyến, khối chứa được hình thành bởi ranh giới bên ngoài của nội dung của nó. Nếu không có tổ tiên thì khối container là phần tử body.
5. Chuyển động tự do của các yếu tố
Theo thứ tự thông thường, các phần tử khối được hiển thị bắt đầu từ cạnh trên của cửa sổ trình duyệt và hướng về phía dưới cùng. Thuộc tính float cho phép bạn di chuyển bất kỳ phần tử nào, căn chỉnh nó sang cạnh trái hoặc phải của trang web hoặc phần tử chứa nó. Trong trường hợp này, các phần tử khối khác sẽ bỏ qua nó và các phần tử nội tuyến sẽ di chuyển sang phải hoặc trái, giải phóng không gian cho nó và di chuyển xung quanh nó.
Cơm. 3. Chuyển động tự do của các yếu tố Khối nổi đảm nhận kích thước nội dung của nó, có tính đến phần đệm và đường viền. Lề trên và dưới của phần tử nổi không bị thu gọn. Thuộc tính float áp dụng cho cả phần tử khối và phần tử nội tuyến.
Cạnh ngoài bên trái hoặc bên phải của phần tử được di chuyển, không giống như các phần tử được định vị, không thể được đặt ở bên trái (hoặc bên phải) của cạnh trong của khối chứa nó, tức là. vượt ra ngoài ranh giới của nó. Hơn nữa, nếu phần đệm bên trong được chỉ định cho khối container thì khối nổi sẽ được đặt cách nhau từ cạnh của khối container ở khoảng cách đã chỉ định.
Thuộc tính tự động thay đổi giá trị được tính toán (hiển thị trên trình duyệt) của thuộc tính display thành display: block cho các giá trị sau: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell .table-caption, table-header-group, table-footer-group. Giá trị của bảng nội tuyến thay đổi thành bảng .
Thuộc tính không có tác dụng đối với các phần tử có display: flex và display: inline-flex .
Khi sử dụng thuộc tính float cho khối yếu tố Hãy chắc chắn để thiết lập chiều rộng. Điều này sẽ tạo không gian cho các nội dung khác trong trình duyệt. Nhưng nếu chiều rộng tổng hợp của tất cả các cột lớn hơn không gian có sẵn thì phần tử cuối cùng sẽ giảm xuống.
Đồng thời, các lề dọc yếu tố sắp xếp hợp lý không bị thu gọn với phần đệm của các phần tử liền kề, không giống như các phần tử khối thông thường.
6. Hủy bỏ dòng xung quanh các phần tử
6.1. tài sản rõ ràng
Thuộc tính clear xác định cách phần tử theo sau phần tử float sẽ được định vị. Thuộc tính hủy phần float trên một hoặc cả hai phía của phần tử được đặt bởi thuộc tính float. Để ngăn nền hoặc đường viền hiển thị dưới các phần tử nổi, hãy sử dụng quy tắc (tràn: ẩn;).
6.2. Làm sạch luồng có kiểu bằng cách sử dụng lớp Clearfix và lớp giả :after
Giả sử bạn có một thùng chứa khối không được chỉ định chiều rộng và chiều cao. Một khối nổi có kích thước xác định được đặt bên trong nó.
Cơm. 4. “Hiệu ứng thu gọn” của khối containerGiải pháp cho vấn đề:
Chúng tôi tạo lớp .clearfix và kết hợp với lớp giả :after, áp dụng nó cho khối chứa.
Tùy chọn thứ hai để xóa luồng:
Clearfix:after ( nội dung: ""; hiển thị: bảng; xóa: cả hai; ) 
Cơm. 5. Áp dụng phương pháp “làm sạch” khối container chứa phần tử nổi
6.3. Một cách dễ dàng để làm sạch một luồng
Có một thủ thuật khác để xóa luồng cho một phần tử chứa các phần tử nổi, chẳng hạn như danh sách có dấu đầu dòng theo chiều ngang:
Ul ( lề: 0; kiểu danh sách: không có; đệm: 20px; nền: #e7e6d4; tràn: tự động; ) li ( float: left; width: calc(100% / 3 - 20px); chiều cao: 50px; lề- phải: 20px; nền: #ffffff; đường viền: 3px nét đứt #666666; ) li:con cuối cùng (lề phải: 0;) Hình. 6. Dọn dẹp luồng danh sách ngang
Sự miêu tả
Đặt cách một phần tử được định vị so với cửa sổ trình duyệt hoặc các đối tượng khác trên trang web.
Cú pháp
vị trí: tuyệt đối | cố định | tương đối | tĩnh | thừa kế
Giá trị
tuyệt đối Cho biết phần tử được định vị tuyệt đối, khiến các phần tử khác xuất hiện trên trang web như thể phần tử không được định vị tuyệt đối. Vị trí của một phần tử được xác định bởi các thuộc tính left , top , right , dưới cùng và vị trí cũng bị ảnh hưởng bởi giá trị thuộc tính vị trí của phần tử cha. Vì vậy, nếu cha mẹ giá trị vị tríđược đặt ở chế độ tĩnh hoặc không có cha mẹ thì tọa độ được tính từ cạnh của cửa sổ trình duyệt. Nếu giá trị vị trí của phần tử cha là cố định, tương đối hoặc tuyệt đối thì tọa độ được tính từ cạnh của phần tử cha. cố định Trong hành động của nó, giá trị này gần với tuyệt đối, nhưng không giống như nó, nó được gắn với điểm trên màn hình được chỉ định bởi các thuộc tính left , top , right và Bottom và không thay đổi vị trí của nó khi cuộn trang web. Trình duyệt Firefox hoàn toàn không hiển thị thanh cuộn, nếu vị trí của phần tử được đặt thành cố định và nó không hoàn toàn vừa với cửa sổ trình duyệt. TRONG Trình duyệt Opera Mặc dù thanh cuộn được hiển thị nhưng chúng không ảnh hưởng đến vị trí của phần tử theo bất kỳ cách nào. tương đối Vị trí của phần tử được đặt tương ứng với vị trí ban đầu của nó. Việc thêm các thuộc tính left , top , right và Bottom sẽ thay đổi vị trí của phần tử và di chuyển nó sang bên này hay bên kia so với vị trí ban đầu của nó. Các phần tử tĩnh được hiển thị như bình thường. Việc sử dụng các thuộc tính left , top , right và Bottom không tạo ra bất kỳ kết quả nào. kế thừa Kế thừa giá trị của cha mẹ.HTML5 CSS2.1 IE Cr Op Sa Fx
Kết quả ví dụ này thể hiện trong hình. 1.
Cơm. 1. Sử dụng thuộc tính vị trí
Mô hình đối tượng
document.getElementById("elementID").style.position
Trình duyệt
Trình duyệt Internet Explorer 6 không hỗ trợ giá trị cố định. Internet Explorer trước phiên bản 8.0 không hỗ trợ giá trị kế thừa.
chức vụ
Thuộc tính vị trí CSSđược sử dụng để chỉ định cách định vị một phần tử HTML trên một trang. Việc thay đổi vị trí của phần tử được thực hiện bằng cách sử dụng các thuộc tính trên, phải, dưới và trái.
Loại tài sản
Mục đích: định vị.
Áp dụng cho: tất cả các phần tử.
Kế thừa: không.
Giá trị
Giá trị của thuộc tính vị trí CSS là một trong từ khóa chỉ định phương pháp định vị.
- tĩnh- cách sắp xếp thông thường của một phần tử trên trang, có tính đến loại của nó (khối, nội tuyến, v.v.) và các phần tử xung quanh nó.
- liên quan đến- định vị tương đối. Đầu tiên, trình duyệt định vị phần tử ở vị trí bình thường và sau đó di chuyển nó so với chỗ này. Đồng thời, các phần tử HTML còn lại hoạt động như thể phần tử đó chưa được di chuyển đi bất cứ đâu, tức là vị trí của nó trước khi dịch chuyển vẫn không có người ở và họ “không nhìn thấy” nó ở vị trí mới.
- tuyệt đối- định vị tuyệt đối. Một phần tử được định vị tương đối so với phần tử tổ tiên gần nhất của nó, có giá trị thuộc tính vị trí không bằng tĩnh (nghĩa là vị trí hiện diện trong hai phần tử cùng một lúc). Nếu không có tổ tiên như vậy thì phần tử sẽ được định vị tương ứng với cửa sổ trình duyệt. Đồng thời, các phần tử HTML xung quanh hoạt động như thể phần tử được định vị tuyệt đối hoàn toàn không có trên trang, nghĩa là định dạng xảy ra mà không có sự tham gia của nó.
- đã sửa- cũng định vị tuyệt đối. Gần giống như tuyệt đối, chỉ có điều ở đây phần tử không thể được định vị tương đối với bất kỳ phần tử tổ tiên nào mà chỉ tương đối với cửa sổ trình duyệt, do đó thuộc tính vị trí chỉ được sử dụng cho chính phần tử đó. Ngoài ra, khi cuộn, phần tử không thay đổi vị trí của nó trong cửa sổ.
- thừa kế- kế thừa giá trị của thuộc tính vị trí CSS từ phần tử cha.
Như bạn đã biết, các phần tử nội tuyến thông thường không thể được cung cấp rõ ràng về chiều cao (CSS) hoặc chiều rộng (CSS). Tuy nhiên, nếu áp dụng giá trị định vị tuyệt đối hoặc cố định cho phần tử nội tuyến thì phần tử đó sẽ có thể thay đổi kích thước. Hãy nhớ tính năng này, nó thường giúp ích rất nhiều.
Nhập tỷ lệ phần trăm: không tồn tại.
Giá trị mặc định: tĩnh.
Các phần tử HTML được gọi là phần tử tổ tiên đối với những thẻ nằm bên trong chúng ở bất kỳ cấp độ lồng nhau nào và phần tử gốc đối với những thẻ nằm bên trong chúng ở cấp độ đầu tiên. Đương nhiên, tổ tiên cũng là yếu tố cha mẹ cho con cháu của họ ở cấp độ làm tổ đầu tiên (con cái).
Đương nhiên, khi định vị, không nhất thiết phải sử dụng các thuộc tính CSS top, right, Bottom hoặc left để thay đổi vị trí của phần tử. Có, với vị trí tương đối, điều này sẽ không mang lại nhiều tác dụng - phần tử sẽ bị loại khỏi luồng trực tiếp, nhưng dù sao thì không ai có thể thay thế nó. Nhưng với tuyệt đối, phần tử sẽ không chỉ bị “tách ra” khỏi ngữ cảnh của trang HTML mà cả các phần tử thấp hơn cũng sẽ thay thế nó. Hơn nữa, với vị trí: cố định, nó cũng sẽ ở yên một chỗ khi cuộn.
Các hình ảnh bên dưới hiển thị bốn thành phần trên trang, một phần tử cha và ba phần tử con của nó và các tùy chọn định vị cho một trong số chúng phần tử con so với cha mẹ (tuyệt đối) và so với vị trí ban đầu của nó (tương đối).
Cú pháp
vị trí: tĩnh | tương đối | tuyệt đối | cố định | thừa kế
Ví dụ CSS: sử dụng vị trí
Phiên bản CSS
| Phiên bản: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Ủng hộ: | KHÔNG | Đúng | Đúng | Đúng |
Trình duyệt
| Trình duyệt: | trình duyệt web IE | Google Chrome | Mozilla Firefox | Opera | ||
| Phiên bản: | 6.0 và 7.0 | 8.0 trở lên | 2.0 trở lên | 2.0 trở lên | 9.2 trở lên | 3.1 trở lên |
| Ủng hộ: | một phần | Đúng | Đúng | Đúng | Đúng | Đúng |
Internet Explorer 6.0 và 7.0 không hiểu giá trị kế thừa, IE 6.0 chưa hiểu fix .
Xin chào các độc giả thân mến của trang blog. Hôm nay chúng ta sẽ nói về nguyên tắc định vị các phần tử HTML bằng sử dụng CSS Quy tắc vị trí (với các giá trị tuyệt đối, tương đối và cố định) và các thuộc tính chỉ định độ lệch trái, phải, trên và dưới. Bạn có thấy ngôi sao ở góc dưới bên trái không? Sau khi đọc hết bài viết, bạn sẽ biết làm thế nào nó đạt được điều đó.
Trong bài viết trước chúng ta đã nói về một trong những nguyên tắc cơ bản giúp phá vỡ dòng chảy thông thường của các kế hoạch liên tiếp. Mã HTML thẻ. Nó cho phép bạn triển khai việc xây dựng trang web hiện nay chủ yếu dựa trên đó. Nhưng không nổi một mình...
Vị trí tương đối - định vị tương đối
Ngoài ra còn có Vị trí, chịu trách nhiệm định vị các thẻ bằng cách sử dụng các biểu định kiểu xếp tầng và cũng cho phép phá vỡ dòng chảy bình thường. Theo cách hiểu, quy tắc này sẽ phức tạp hơn một chút so với quy tắc thả nổi đã thảo luận trước đó, nhưng tôi nghĩ chúng ta có thể xử lý được nó.
Nó có bốn giá trị có thể (tĩnh | tương đối | tuyệt đối | cố định). Làm thế nào chúng ta có thể biết điều này? Tất nhiên, từ thông số kỹ thuật được đăng trên trang web chính thức:
Giá trị mặc định là vị trí: tĩnh. Những thứ kia. trong một luồng thông thường, hai quy tắc CSS có thể phá vỡ nó có các giá trị mặc định là static và float:none. Ngay khi một trong những giá trị này thay đổi, luồng mã HTML bình thường ở nơi này sẽ bị gián đoạn, vì giờ đây thẻ này có thể tương tác với các hàng xóm của nó theo một cách hoàn toàn khác hoặc thậm chí không tương tác chút nào.
Hãy bắt đầu với vị trí tương đối, vị trí này sẽ tương ứng với giá trị vị trí: tương đối. Sau khi chúng tôi đăng ký thẻ, chúng tôi sẽ có thể đặt phần bù (vị trí) cho phần tử này bằng cách sử dụng phần bổ sung quy tắc Trái, phải, trên và dưới(tương ứng trái, phải, trên và dưới):
Mặc định cho cả bốn là Tự động. Khi chúng tôi chỉ định quy tắc vị trí: tương đối cho thẻ, các giá trị thụt lề ở tất cả các cạnh được đặt lại về 0 và bạn có cơ hội tự đặt chúng.
Cần phải hiểu cách thụt lề được đặt. Ví dụ: left: 400px nghĩa là thụt lề từ bên trái sang bên phải một lượng tương ứng và top: 100px nghĩa là từ trên xuống. Nếu bạn chỉ định các giá trị âm cho Left, right, top và Bottom thì phần tử sẽ di chuyển theo hướng ngược lại (ví dụ top là về trên cùng và Left là về bên trái).
Hãy xem xét việc sử dụng tương đối trên một phần tử nổi. Chúng ta hãy có hai vùng chứa Div, chúng ta sẽ tô màu bằng các màu nền khác nhau để rõ ràng bằng cách sử dụng .
Ban đầu chúng ta sẽ làm cho container đầu tiên nổi sang trái bằng cách sử dụng thuộc tính tương ứng và vì nó sẽ trống, sau đó chúng tôi sẽ cung cấp cho nó (và thụt lề bằng cách sử dụng lề):
Kết quả là chúng ta sẽ có được một bức tranh sơn dầu như thế này:
Đúng như dự đoán, thùng chứa đầu tiên sẽ trôi về bên trái. Đồng thời, bản thân khối thứ hai dường như không nhận thấy điều này (vì nó), nhưng nó lại nhận thấy điều đó phần tử nội tuyến văn bản bao quanh khối nổi của chúng tôi.
Bây giờ hãy thêm vào Quy tắc CSSđối với vị trí vùng chứa đầu tiên: tương đối và đặt lề trái và lề trên bằng cách sử dụng Left và top:
Kết quả chúng ta sẽ thấy phần tử float của chúng ta đã di chuyển theo lề đã chỉ định:
Lưu ý rằng văn bản vẫn tiếp tục chạy xung quanh nó như thể nó vẫn đứng yên tại chỗ. Những thứ kia. Nhiều thẻ Html, khi được xây dựng, coi rằng chúng ở đúng vị trí của chúng (không tính đến sự dịch chuyển Trái và Trên mà chúng tôi đã chỉ định trong quy tắc).
Nhưng không phải tất cả các thẻ đều thực hiện được điều này, nếu không chúng tôi sẽ không thấy bất kỳ thay đổi nào. Tổ tiên gần nhất với cuộn(trong trường hợp của chúng tôi đây sẽ là thẻ Html, tức là khu vực xem thực tế) những thay đổi này sẽ được chú ý.
Nguyên lý hoạt động của tương đối không phức tạp nhưng vẫn chưa rõ tại sao nó có thể được sử dụng trong thực tế. Trong thực tế quy tắc này được sử dụng kết hợp với vị trí tuyệt đối, và ở dạng này nó thấy rất ứng dụng tuyệt vời. Nhưng điều đầu tiên trước tiên.
Vị trí tuyệt đối - định vị tuyệt đối trong CSS
Hãy chuyển sang xem xét vị trí tuyệt đối. Cách dễ nhất để bắt đầu xem xét quy tắc CSS này là dùng một ví dụ minh họa. Giả sử bên trong vùng chứa Div, chúng ta có thẻ Span nội tuyến mà chúng ta sẽ đặt vị trí tuyệt đối cho thẻ này.
Nhưng trước tiên, chúng ta hãy xem xét cấu trúc này mà không thêm “vị trí: tuyệt đối”. Đồng thời, để nhấn mạnh dòng của Span, chúng tôi sẽ thêm chiều cao cho nó, chiều cao này sẽ không được áp dụng và lần này chúng tôi sẽ thêm mã CSS để thay đổi, không thông qua cấu trúc Head:
Đối với Div, chúng tôi cũng đặt lề trái thành 100px. Bây giờ hãy xem những thay đổi nào nếu chúng ta đặt vị trí tuyệt đối cho thẻ dòng Span bằng cách thêm Quy tắc tuyệt đối về vị trí CSS:
#abs span( nền:#C0FFC0; chiều cao:100px; vị trí:tuyệt đối; )>
Một vài chuyện lạ đã xảy ra. Đánh giá dựa trên thực tế là thuộc tính Height:100px đã được áp dụng cho Span, nó đã không còn là thẻ nội tuyến nữa. Sau đó, rõ ràng là các mảnh “thứ nhất” và “thứ ba” đã nối với nhau, như thể yếu tố có từ “thứ hai” không còn tồn tại giữa chúng nữa. Đây chính xác là cách định vị tuyệt đối hoạt động trong CSS.
Nhưng chúng ta hãy xem xét mọi thứ từng điểm một khi đặt thuộc tính cho một phần tử "vị trí: tuyệt đối":
- Thẻ mà quy tắc này được chỉ định sẽ trở thành thẻ khối
- Kích thước của khối này sẽ được xác định bởi nội dung chứa trong đó (trừ khi bạn chỉ định chúng một cách rõ ràng bằng chiều rộng và chiều cao).
- Thẻ có “vị trí: tuyệt đối” được chỉ định sẽ không tương tác với bất kỳ phần tử mã Html nào khác ngoại trừ phần tử gốc cuộn gần nhất của nó. Tất cả các thẻ khác trong mã chỉ đơn giản là không nhận thấy một phần tử có vị trí tuyệt đối (và điều này có thể thấy được từ ví dụ của chúng tôi)
Giống như đối với các phần tử nổi (có chỉ định Float), nếu áp dụng “vị trí: tuyệt đối” cho thẻ thì hiệu ứng thu gọn lề cho các thẻ đó sẽ không xuất hiện. Những thứ kia. Không ai có thể chuyển thụt lề dọc của họ cho anh ta và anh ta cũng sẽ không thể chuyển chúng cho bất kỳ ai (anh ta không chia sẻ thụt lề dọc với bất kỳ ai).
Nếu bạn nhớ bài viết trước ở phần “”, bạn sẽ thấy rằng cả ba điểm này đều được quan sát thấy khi tạo các phần tử nổi bằng Float.
Do đó, nếu Float đã được đặt cho một thẻ, nhưng sau đó “vị trí: tuyệt đối” được chỉ định cho thẻ đó, thì cái đầu tiên sẽ được trình duyệt đặt lại (nó chịu trách nhiệm phân tích cú pháp mã) thành Không có (giá trị mặc định), bởi vì không có ích gì khi thực hiện hai mô hình giống hệt nhau.
Điều này hoàn toàn tốt, nhưng với sự trợ giúp của từ “tuyệt đối”, chúng ta phải thực hiện việc định vị tuyệt đối. Vâng, thực ra, điều này thực sự đúng. Kết hợp với nó, chúng ta có thể sử dụng bốn quy tắc CSS giống nhau: Trái, phải, trên và dưới. Họ sẽ làm việc như thế nào với định vị tuyệt đối?
Họ vẫn sẽ đặt phần bù, nhưng phần bù không còn liên quan đến vị trí hiện tại của phần tử mà liên quan đến ranh giới của vùng chứa nó.
Và bản thân khái niệm này vùng chứa cho các phần tử được định vị tuyệt đối sẽ khác với cái được chấp nhận chung. Từ các bài viết trước, bạn có thể nhớ rằng một thùng chứa Thẻ Html là khung nhìn và đối với tất cả các khung nhìn khác là khu vực nội dung của cha mẹ. Điều này sẽ không xảy ra đối với thẻ có vị trí tuyệt đối được chỉ định.
Với định vị tuyệt đối, chúng ta sẽ có thể tự mình chỉ định vùng chứa (nó sẽ là vùng chứa đầu tiên của tổ tiên có giá trị vị trí khác với giá trị tĩnh, được sử dụng theo mặc định).
Giả sử nếu chúng ta chỉ đặt vị trí tuyệt đối nhưng không chỉ định bất kỳ giá trị nào cho các quy tắc Trái, phải, trên và dưới thì giá trị Tự động mặc định sẽ được sử dụng cho chúng và phần tử như vậy sẽ giữ nguyên vị trí của nó (như trong ảnh chụp màn hình cuối cùng của chúng tôi). Mọi thứ nên rõ ràng ở đây.
CSS sử dụng cấu trúc tổ tiên-con mà tôi đã viết chi tiết trong bài viết về . Nhiệm vụ của chúng tôi, khi xác định vùng chứa cho thẻ được định vị tuyệt đối, sẽ là tìm tổ tiên có vị trí có giá trị khác với giá trị tĩnh (tức là khi nó được chỉ định rõ ràng).
Trong ví dụ của chúng tôi, chúng tôi không chỉ định vị trí cho bất kỳ tổ tiên nào của thẻ Span, vì vậy khi chúng tôi đạt đến đỉnh cao nhất (thẻ Html), chúng tôi sẽ dừng ở đó. Hãy đặt khoảng đệm bằng 0 cho ví dụ được thảo luận ở trên và đảm bảo rằng chúng tôi đúng:
#abs span( nền:#C0FFC0; chiều cao:100px; vị trí:tuyệt đối; left:0; top:0; )>
Kết quả là thẻ được định vị tuyệt đối đã được ép vào điểm tham chiếu số 0 của khung nhìn. Nhưng chúng ta tự do chọn vùng chứa cho phần tử có vị trí tuyệt đối được chỉ định. Điều này có thể giải quyết như thế nào?
Sự kết hợp giữa vị trí tuyệt đối và tương đối trong bố cục Div
Chà, tại sao không sử dụng quy tắc CSS “vị trí: tương đối” cho việc này. Hãy đăng ký nó vào thẻ bắt buộc tổ tiên (cuối cùng sẽ trở thành vùng chứa cho một phần tử được định vị tuyệt đối) và sẽ không chỉ định các giá trị Trái, phải, trên cùng hoặc dưới cùng, do đó, trên thực tế, không thực hiện thay đổi nào đối với vị trí tổ tiên nhất định(nó sẽ vẫn ở trong luồng bình thường) nhưng bằng cách gán nó container và phần đầu của báo cáođể định vị tuyệt đối của chúng tôi.
Nếu chúng ta viết "tương đối" cho Thẻ nội dung, khi đó hình ảnh của chúng ta sẽ thay đổi một chút:
Bạn thấy đấy, những vết lõm đặc trưng đã xuất hiện cho thấy bây giờ vết lõm bên trái được lấy làm điểm bắt đầu góc trên cùng gắn thẻ Thân. Hãy nhớ rằng các giá trị mặc định cho thẻ này bao gồm lề 8 pixel, đó là những gì chúng ta thấy:
Bây giờ, ngoài những gì đã được thực hiện, hãy viết “vị trí: tương đối” cho vùng chứa Div, bên trong có thẻ Span:
Như chúng ta thấy, bức tranh đã thay đổi. Mặc dù thực tế là tương đối được chỉ định cho cả Nội dung và Div, nhưng Div đã trở thành vùng chứa cho Span được định vị tuyệt đối, bởi vì Anh ấy là tổ tiên đầu tiên, có giá trị vị trí khác với giá trị tĩnh.
Hơn nữa, nếu chúng ta cũng viết , cho Div của mình, chúng ta sẽ thấy rằng vùng nội dung với các phần tử hiện có sẽ được sử dụng làm vùng chứa để định vị tuyệt đối. vết lõm:
#abs( nền:#FFC0C0; lề trái: 100px; vị trí: tương đối; đường viền:12px chấm chấm #ccf; đệm:20px; )
Như có thể thấy từ ví dụ, điểm tham chiếu nằm ở góc trên bên trái bên trong khung phần tử (dọc theo đường viền bên trong của nó). Do đó, quy tắc tuân theo rằng đối với các thẻ có “vị trí: tương đối” (là các vùng chứa có vị trí tuyệt đối), tốt hơn hết là không nên sử dụng khung để tránh thái quá.
Thụt lề (bù) Trái, phải, trên và dưới có thể được đặt không chỉ theo đơn vị tuyệt đối (đọc về ), mà còn theo tỷ lệ phần trăm, sẽ được lấy từ chiều rộng (trái và phải) và chiều cao (trên và dưới) của thùng chứa kết quả. Những thứ kia. "top:100%" sẽ tương ứng với 100% chiều cao của vùng chứa và "left:100%" sẽ tương ứng với 100% chiều rộng của vùng chứa.
Và chính sự tương tác được mô tả ở trên là điều tôi nghĩ đến khi nói về sự kết hợp của vị trí tuyệt đối và tương đối. Nhờ đó, chúng ta có cơ hội tự mình lựa chọn vùng chứa, hay nói cách khác là điểm khởi đầu cho việc định vị tuyệt đối. Tại sao liên kết này được sử dụng trong thực tế?
Ví dụ: để thực hiện một tác vụ tương tự như Litebox để hiển thị ảnh kích thước đầy đủ, họ có thể sử dụng nguyên tắc này.
Những thứ kia. nếu bạn cần trên trang hình thành sự xuất hiện và ẩn giấu của một phần tử, khi xuất hiện sẽ không ảnh hưởng đến tất cả các thẻ khác (tương tác với chúng). Trong trường hợp này, sự xuất hiện của một khối được định vị tuyệt đối sẽ không kéo theo hiện tượng giật và tái cấu trúc toàn bộ trang web.
Đối với menu thả xuống, hãy thực hiện như sau. Khi bạn di con trỏ chuột (đặt trong CSS với ) lên mục menu gốc, một phần tử được định vị tuyệt đối bằng “tuyệt đối” sẽ xuất hiện (các mục menu lồng nhau được tạo dựa trên ). Danh sách thả xuống này xuất hiện bên cạnh mục menu gốc vì lý do đơn giản là vị trí: tương đối được chỉ định trong đó. Tất cả.
Vị trí đã cố định - gắn vào khung nhìn
Phương pháp định vị cuối cùng là "vị trí: cố định". Các phương pháp được thảo luận trước đây được thiết kế để đặt tương đối với bất kỳ thành phần mã Html nào. Nhưng nếu chúng ta bắt đầu cuộn trang, thì các thẻ của nó (ngay cả những thẻ có vị trí tuyệt đối hoặc tương đối) sẽ di chuyển lên (hoặc xuống).
Nhưng khi sử dụng fix thì điều này sẽ không còn xảy ra nữa. Một phần tử được định vị theo cách này sẽ luôn ở cùng một vị trí trong khung nhìn, bất kể thao tác cuộn trang web. Có thể bạn đã từng gặp những lựa chọn như vậy trên các trang web. Ví dụ: một plugin khá phổ biến dành cho WordPress có tên là .
Đối với thẻ có vị trí được chỉ định: cố định, không ai tìm kiếm vùng chứa vì bản thân nó là khung nhìn. Đây chính xác là sự khác biệt so với “tuyệt đối” và mọi thứ khác đều giống nhau. Các khối có vị trí cố định hoạt động khi bạn cuộn trang như thể chúng là các thành phần của giao diện cửa sổ trình duyệt của bạn (chúng luôn ở trong tầm tay).
Bằng cách này, chẳng hạn như các thanh công cụ, bảng thả xuống có khả năng để lại phản hồi, v.v. được triển khai. đồ đạc. Như một ví dụ trên trang này Tôi đặt vị trí: cố định cho một bức ảnh nhỏở góc dưới bên trái màn hình của bạn (khung nhìn):
Đó là tất cả cho ngày hôm nay, trong bài viết tiếp theo chúng ta sẽ nói về , chỉ áp dụng cho các thành phần mã đã được định vị, tức là. trong đó cố định, tương đối hoặc tuyệt đối được chỉ định.
Chúc bạn may mắn! Hẹn gặp lại bạn sớm trên các trang của trang blog
Bạn có thể xem thêm video bằng cách vào");">
Bạn có thể quan tâm
Định vị bằng chỉ mục Z và CSS Quy tắc con trỏđể thay đổi con trỏ chuột 
Nổi và xóa trong CSS - công cụ bố trí khối
Kiểu danh sách (loại, hình ảnh, vị trí) - Quy tắc CSS cho cài đặt vẻ bề ngoài danh sách trong mã HTML 
Hiển thị (chặn, không có, nội tuyến) trong CSS - đặt loại hiển thị HTML các thành phần trên một trang web 
CSS dùng để làm gì, làm thế nào để kết nối các biểu định kiểu xếp tầng với tài liệu HTML và cú pháp cơ bản của ngôn ngữ này
Thuộc tính vị trí được sử dụng để đặt vị trí của một thành phần trên trang. Theo mặc định, tất cả các thành phần đều được đặt tĩnh trên trang. Bố cục tĩnh xác định vị trí của một phần tử theo thứ tự tuần tự của các phần tử trên một trang. Đây là vị trí mặc định cho từng phần tử.
Nếu một phần tử được chỉ định là có thể định vị được thì vị trí của nó đã được thay đổi từ tĩnh thành một trong bốn giá trị thuộc tính có thể có vị trí nền CSS: tương đối, tuyệt đối, cố định, cố định.
Ngoài năm giá trị được đề cập, hai giá trị thuộc tính mới đã được thêm vào CSS3: page và center.
Sau khi phần tử đã được định vị ( được gán một giá trị không tĩnh), vị trí của nó trên trang được xác định bằng cách sử dụng các thuộc tính offset: top , right , Bottom và left . Thuộc tính offset chỉ hoạt động trên các phần tử được định vị, do đó việc áp dụng chúng cho các phần tử tĩnh không hoạt động. Các thuộc tính này được sử dụng để đặt độ lệch của một phần tử so với bối cảnh định vị của nó.
Đây là hệ tọa độ mà bạn sử dụng để xác định vị trí của một phần tử bằng các thuộc tính offset.
Phần tử có vị trí tương đối ( vị trí: tương đối) thiết lập vị trí của các thành phần con được định vị tuyệt đối và cũng thiết lập vị trí của chính nó. Điều này có nghĩa là bạn có thể di chuyển một phần tử khỏi vị trí ban đầu bằng cách sử dụng thuộc tính offset. Điểm tham chiếu cho phần tử trong trường hợp này là vị trí ban đầu của nó trên trang so với góc trên bên trái:
Một phần tử có vị trí tương đối được di chuyển khỏi vị trí ban đầu của nó sau khi áp dụng thuộc tính vị trí: tương đối cho nó. Hình vuông chấm biểu thị vị trí ban đầu của phần tử trên trang. Phần tử được di chuyển xuống 35 pixel và 35 pixel sang phải so với vị trí ban đầu của nó.
Một phần tử có vị trí tương đối được di chuyển khỏi vị trí ban đầu vẫn giữ nguyên vị trí thứ tự của nó trong "ngăn xếp" của phần còn lại của thiết kế và bất kỳ vị trí mới nào mà nó đảm nhận đều không ảnh hưởng đến vị trí của nội dung trên trang. Nó có thể dễ dàng chồng lên các phần tử khác trên trang. Hình ảnh trên cho thấy vị trí ban đầu của một phần tử được duy trì như thế nào sau khi nó được di chuyển.
Khi một phần tử được định vị tuyệt đối ( vị trí: tuyệt đối), nó có thể được đặt tương ứng với một phần tử khác trên trang. Phần tử được đặt tương đối phải có một vị trí nhất định.
Với vị trí tương đối của CSS, một phần tử được định vị tuyệt đối được định vị tương ứng với một phần tử có vị trí tương đối ( vị trí: tương đối). Gốc của hệ tọa độ là góc trên bên trái so với phần tử được định vị.
Ví dụ, hình ảnh tiếp theo thể hiện một phần tử được đặt tĩnh. Hình vuông màu hồng được di chuyển sang bên trái để dòng văn bản chạy xung quanh nó:
Phần tử định vị tĩnh
Đường viền màu xám hiển thị đường viền của hộp đựng hình vuông màu hồng. Vùng chứa đã được đặt thành vị trí: tương đối, do đó, nó đặt bối cảnh định vị cho hình vuông màu hồng. Khi hình vuông màu hồng được định vị tuyệt đối, nó sẽ bị xóa khỏi luồng trang và văn bản được phân phối như thể hình vuông chưa từng có trong luồng:
Hình vuông màu hồng được định vị tuyệt đối so với hình vuông gốc của nó (viền màu xám). Nó nằm: trên cùng: 30px, bên phải: 40px.
Nếu một phần tử được định vị tuyệt đối và cả phần tử cha của nó đều không được đặt thuộc tính vị trí thì nó được định vị tương đối với phần tử đó.
Một phần tử có vị trí CSS cố định được định vị tương ứng với khung nhìn. Nó có hành vi tương tự như các phần tử được định vị tuyệt đối: nó bị xóa khỏi luồng của trang và không còn ảnh hưởng đến bố cục. Nhưng thay vì được định vị tương đối với bất kỳ phần tử nào trên trang, nó được định vị tương đối với khung nhìn và không phụ thuộc vào việc cuộn: nó được cố định trong khung nhìn ở vị trí được chỉ định bởi các thuộc tính offset.
Vị trí cố định thường được sử dụng để giữ một số yếu tố nhất định trong tầm mắt mọi lúc. Ví dụ: tiêu đề cố định, điều hướng.
Giá trị của các thuộc tính dính, giữa và trang được bật khoảnh khắc này vẫn đang thử nghiệm với sự hỗ trợ yếu.
Một phần tử có vị trí cố định ( vị trí: dính) được coi là sự kết hợp của các phần tử tương đối và cố định. Ví dụ:
Phần tử (vị trí: dính; trên cùng: 70px; )
Phần tử đã cho sẽ hoạt động như thể nó có vị trí: tương đối cho đến khi khung nhìn đạt đến một điểm trong khi cuộn cách đầu khung nhìn 10 pixel. Nếu phần tử ở trên, nó sẽ được cố định 70 pixel từ trên xuống cho đến khi cuộn trình duyệt đạt đến ngưỡng.
Hiệu ứng "dính" thường được tạo bằng sử dụng JavaScript và khi giá trị cố định được tất cả các trình duyệt hỗ trợ, nó có thể được sao chép bằng CSS.
Một điểm đáng lưu ý: Bạn cần chỉ định một "ngưỡng" cho phần tử "dính" bằng cách sử dụng một trong các thuộc tính offset, nếu không phần tử sẽ không hoạt động và sẽ hoạt động chính xác như thể nó được định vị tương đối.
Giá trị trung tâm được sử dụng để căn giữa một phần tử trong một phần tử khác. Phần tử ở giữa sẽ được đặt ở giữa vùng chứa và bị xóa khỏi "ngăn xếp" các phần tử trang. Bạn có thể sử dụng thuộc tính offset để di chuyển một phần tử khỏi vị trí chính giữa của nó.
Hành vi của giá trị thuộc tính vị trí trang vẫn chưa rõ ràng. Nó xử lý phân trang và vùng chứa được tạo bằng cách sử dụng Vùng CSS.
Sự thật và ghi chú thú vị
Các phần tử có vị trí tuyệt đối trong CSS sử dụng thuộc tính offset có thể có phần đệm ( lề), được đặt bên trong bối cảnh định vị.
Một phần tử được định vị tuyệt đối sẽ chiếm nhiều không gian theo chiều ngang và chiều dọc theo yêu cầu của nội dung của nó. Nó có thể được kéo dài để lấp đầy chiều rộng của thùng chứa nó. Để làm điều này, bạn cần để lại chiều rộng của nó ( chiều rộng) không được xác định và đặt đường viền bên trái của nó trên đường viền bên trái của cha mẹ và đường viền bên phải của nó trên đường viền bên phải của cha mẹ, sử dụng các thuộc tính offset bên phải và bên trái:
vị trí: tuyệt đối; trái: 0; phải: 0;
Tương tự, một phần tử được định vị tuyệt đối có thể được kéo dài theo chiều dọc bằng cách sử dụng thuộc tính trên và dưới:
vị trí: tương đối; trên cùng: 0; đáy: 0;
Trong trường hợp xác định chiều cao và chiều rộng của một phần tử có định vị tuyệt đối CSS, thì:
- nếu cả hai thuộc tính trên và dưới đều được xác định thì đỉnh có lực lớn hơn;
- nếu xác định phải và trái thì trái thắng;
- nếu thuộc tính hướng là rtl ( ví dụ như tiếng Ả Rập), thì “thắng” ngay.
Các phần tử cố định thường được định vị tương ứng với khung nhìn. Ngoại trừ khi bạn áp dụng thuộc tính biến đổi cho một trong các cha mẹ chồng chéo. Trong trường hợp này, phần tử được chuyển đổi tạo ra một khối bên ngoài cho tất cả các phần tử con được định vị của nó, ngay cả những phần tử có vị trí cố định.
Cú pháp chính thức
Cú pháp:
vị trí: tĩnh | tương đối | tuyệt đối | dính | trung tâm | trang | đã sửa
Giá trị ban đầu: tĩnh.
Áp dụng: tất cả các mặt hàng.
Sử dụng trong hoạt hình: KHÔNG.
Giá trị
tĩnh
Thuật toán định vị CSS mặc định. Khối được định vị theo dòng chảy bình thường. Các thuộc tính trên, phải, dưới và trái không được áp dụng.
liên quan đến
Vị trí của khối được tính tương ứng với điểm xuất phát. Trong mọi trường hợp, kể cả các phần tử bảng, nó không ảnh hưởng đến vị trí của bất kỳ phần tử nào tiếp theo.
Tác dụng của việc áp dụng thuộc tính vị trí: tương đối cho các thành phần của bảng:
- table-row-group , table-header-group , table-footer-group và table-row được bù đắp từ vị trí bình thường của chúng trong bảng. Nếu các ô trong bảng kết hợp nhiều hàng thì chỉ các ô được dịch chuyển so với hàng được định vị;
- table-column-group , table-column không offset cột tương ứng khi áp dụng thuộc tính vị trí: tương đối;
- chú thích bảng và ô bảng được đặt lệch so với vị trí bình thường của chúng trong bảng. Nếu một ô trong bảng trải rộng trên nhiều cột hoặc hàng thì toàn bộ ô ghép sẽ được dịch chuyển.
tuyệt đối
Vị trí của khối được chỉ định bởi các thuộc tính trên cùng, bên phải, dưới cùng và bên trái, mô tả phần bù so với khối bên ngoài. Các khối được định vị tuyệt đối sẽ bị loại bỏ khỏi luồng thông thường. Điều này có nghĩa là chúng không ảnh hưởng đến cách bố trí của các phần tử tiếp theo. Các khối được định vị tuyệt đối có thể có phần đệm miễn là phần đệm không chồng lên bất kỳ phần đệm nào khác
dính
Vị trí của khối được tính theo luồng thông thường (như vị trí: tương đối). Khối được bù và cố định so với khung nhìn và khối bên ngoài, và trong mọi trường hợp, bao gồm cả các phần tử bảng, nó không ảnh hưởng đến vị trí của các phần tử tiếp theo. Khi một phần tử được định vị bằng cách dán, vị trí phần tử tiếp theođược chỉ định mà không tính đến phần bù. Hiệu quả của việc áp dụng vị trí: dính vào các phần tử của bảng cũng giống như áp dụng vị trí: tương đối.
trung tâm
Vị trí CSS của các khối được xác định bởi các thuộc tính top, right, Bottom và left. Khối được căn giữa theo chiều dọc và chiều ngang trong vùng chứa so với vị trí trung tâm của khối trong vùng chứa. Các khối ở vị trí trung tâm được loại bỏ khỏi luồng thông thường. Điều này có nghĩa là chúng không ảnh hưởng đến bố cục của các phần tử tiếp theo (giống như tuyệt đối). Các phần tử được định vị ở giữa có thể được thụt lề miễn là chúng không trùng lặp với các phần tử khác.
trang
Vị trí khối được tính toán theo mô hình tuyệt đối. Khi được đặt bên trong một vùng, khối bên ngoài luôn là vùng chứa ban đầu.
Như trong mô hình tuyệt đối, thụt lề khối không trùng lặp với bất kỳ thụt lề nào khác.
Ví dụ
Cha mẹ ( vị trí: tương đối; ) .child ( vị trí: tuyệt đối; top: 10px; trái: 30px; ) /* Tiêu đề vẫn hiển thị khi cuộn khung nhìn */ tiêu đề ( vị trí: cố định; top: 0; trái: 0; phải : 0; ) /* Phần tử này trở nên cố định ngay khi vị trí của nó so với phần trên cùng của khung nhìn nhỏ hơn hoặc bằng 100px */ .sticky ( vị trí: dính; top: 100px; )
Thử nghiệm
Bản demo sau đây cho thấy cách hoạt động của bốn giá trị định vị cơ bản: tương đối, tuyệt đối, cố định và thậm chí dính:
Xem bản demo
Hỗ trợ trình duyệt
Thuộc tính vị trí hoạt động trong tất cả các trình duyệt chính: Chrome, Firefox, Safari, Opera, Internet Explorer, cũng như Android và iOS.
Nhưng việc hỗ trợ các giá trị cố định và cố định khác nhau giữa các trình duyệt. Dưới đây là bảng tương thích cho hai giá trị này:
Trong Internet Explorer, định vị cố định trong CSS không hoạt động nếu tài liệu ở chế độ tương thích.
