Giá trị của thuộc tính vị trí. vị trí: tuyệt đối trong vị trí cha mẹ. Tương tác của các khối tuyệt đối với các phần tử cha
khoảng cách chữ cái chiều cao dòng danh sách kiểu lề max-height chiều rộng tối đa chiều cao tối thiểu chiều rộng tối thiểu phác thảo phần đệm tràn vị trí bên phải căn chỉnh văn bản trang trí văn bản thụt lề văn bản chuyển đổi hàng đầu dọc-căn chỉnh khoảng trắng chiều rộng khoảng cách từVới thuộc tính POSITION
| Tài sản | Giá trị | Vân vân* | Hc* |
|---|---|---|---|
| chức vụ | tĩnh, tương đối, tuyệt đối, cố định, kế thừa | + | - |
Thuộc tính xác định sơ đồ định vị phần tử liên quan đến cha mẹ của mình. Các phần tử có giá trị tuyệt đối và định vị cố địnhđược coi là khối.
Giá trị:
tĩnh- định vị tĩnh, như hiện tại.
thừa kế- Thừa kế tài sản từ cha mẹ.
Hãy xem xét các giá trị còn lại chi tiết hơn.
giá trị tương đối: định vị tương đối
Phần tử được dịch chuyển so với vị trí của nó theo số lượng được chỉ định bởi các giá trị của thuộc tính Bottom, Left, Right, Top. Điều này không ảnh hưởng đến sự sắp xếp của các phần tử trong dòng chảy bình thường theo sau nó, như thể nó chưa hề di chuyển.
Phần tử ( vị trí: tương đối; trên cùng: 25px; trái: 50px; chiều cao: 100px; chiều rộng: 100px; đường viền: 2px rắn #000;)
— định vị được đặt cho khối có hình ảnh liên quan đến và offset từ trên xuống 25px và từ trái sang 50px. Phần tử đã di chuyển so với luồng thông thường, trên thực tế tăng gấp đôi các giá trị này:
giá trị tuyệt đối: định vị tuyệt đối
Một phần tử được định vị tuyệt đối sẽ chiếm vị trí được xác định bởi các giá trị của cải Dưới, Trái, Phải, Trên, chỉ định độ lệch của nó so với ranh giới của cha mẹ.
Hơn nữa, giá trị tài sản Chức vụ phần tử cha ảnh hưởng đến kích thước và vị trí của phần tử được định vị. Nếu nó có ý nghĩa tĩnh hoặc không có cha mẹ thì phần bù sẽ xảy ra tương ứng với đường viền của cửa sổ trình duyệt. Các khối được định vị tuyệt đối được loại trừ khỏi luồng thông thường mà không ảnh hưởng đến vị trí của các phần tử khác.
Phần tử ( vị trí: tuyệt đối; trên cùng: 25px; trái: 50px; chiều cao: 100px; chiều rộng: 100px; đường viền: 2px rắn #000;)
- tương tự như ví dụ trước, chỉ lấy vị trí tuyệt đối cho phần tử. Nó chồng lên phần tử trước đó, phần bù được đo từ ranh giới của phần tử gốc:
Ý nghĩa cố định: định vị cố định
Vị trí của các phần tử có vị trí cố định được xác định theo cách tương tự như đối với các phần tử có vị trí tuyệt đối. Điểm khác biệt duy nhất là chúng được gắn chặt với ranh giới của khu vực xem và không thay đổi vị trí của chúng trong cửa sổ trình duyệt khi cuộn trang.
Giá trị sử dụng đã sửa hiếm khi. Thông thường đây là menu ngangở đầu hoặc cuối trang, như trong thư Yandex.
Thuộc tính Z-INDEX
| Tài sản | Giá trị | Vân vân* | Hc* |
|---|---|---|---|
| INTEGER, tự động, kế thừa | + | - |
Thuộc tính chỉ định vị trí của một phần tử được định vị so với trục Z. Điều này có nghĩa là: các phần tử được xếp chồng lên nhau theo thứ tự tăng dần - hơn nhiều giá trị hơn thuộc tính chỉ mục z, phần tử nằm ở vị trí càng cao. Chỉ hợp lệ cho các phần tử có giá trị thuộc tính được đặt Chức vụ và khác với tĩnh.
Giá trị:
tự động— các phần tử được đặt theo thứ tự vị trí của chúng trong mã trang.
thừa kế- Thừa kế từ cha mẹ.
Phần tử-1, .element-2, .element-3 (vị trí:tương đối;)
.element-1 ( z-index:3; left:40px; top:50px; font-size:46px;)
.element-2 ( z-index:2; left:50px;)
.element-3 ( z-index:1; top:-50px; cỡ chữ:76px; color:#999;)
— chúng ta có hình ảnh là thành phần thứ hai. Thứ tự vị trí của phần tử thứ nhất và thứ ba đã thay đổi. Phần tử dưới cùng-1 được đặt lên trên và phần tử thứ 3 hóa ra là “lớp” dưới cùng:
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ị html các phần tử với 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ó nhận thấy phần tử văn bản nội tuyến chạy xung quanh khối nổi của chúng ta.
Bây giờ, hãy thêm vị trí: liên quan đến các quy tắc CSS cho vùng chứa đầu tiên và đặt phần đệm bên trái và trên cùng 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 định vị 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 vùng chứa cho thẻ Html là khung nhìn và đối với tất cả các chế độ xem khác, vùng chứa là vùng nội dung gốc. Đ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. Chúng tôi sẽ viết nó trong thẻ tổ tiên được yêu cầu (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 ghi 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 bất kỳ thay đổi nào vào vị trí của tổ tiên này (nó sẽ vẫn ở trong luồng bình thường), nhưng 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, các vết lõm đặc trưng đã xuất hiện cho biết góc trên bên trái của thẻ Body hiện được lấy làm điểm bắt đầu. 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 có phần đệm bên trong hiện có sẽ được sử dụng làm vùng chứa để định vị tuyệt đối:
#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ề (offset) 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 đã thảo luận trước đây được thiết kế để sắp xếp vị trí tương ứng 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 để tùy chỉnh giao diện của 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ì, cách 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
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ử ở 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. Định vị tương đối tuyệt đối4. 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à phần tử nội tuyến sẽ dịch chuyển sang phải hoặc trái, giải phóng không gian cho nó và chảy 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 khối container được đặt thành phần đệm, khi đó khối nổi sẽ được đặt cách nhau từ cạnh của khối container ở một khoảng cách xác định.
Thuộc tính tự động thay đổi giá trị được tính toán (hiển thị trong trình duyệt) thuộc tính hiển thịđể hiển thị: chặn 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 - nhóm chân trang . 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 trên các phần tử khối, hãy đảm bảo chỉ định 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 để làm sạch 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
Tôi, giống như tác giả của bài viết, đã ngẫu nhiên tìm thấy rất nhiều thứ trong CSS và thậm chí còn bỏ sót nhiều hơn thế. Đặc biệt là thời gian. Và nếu tôi hiểu ngay được nguyên tắc của những thứ như định vị và nổi, thì nhiệm vụ đơn giản thực sự đã đơn giản ngay từ đầu. Vì mục đích này, thường không có đủ chỗ mà những xung đột và bất thường của những ngôn ngữ lập trình mà chúng ta đột nhiên không được dạy từ khi còn nhỏ được giải thích cho chúng ta bằng ngón tay. Chà, chúng tôi không rõ ràng ở mức độ trực quan, vậy thì sao. Có, và trợ giúp không phải lúc nào cũng được đọc.
Nếu bạn có câu chuyện tương tự thì đây là bài đọc dành cho bạn vào buổi tối.
Một trong những khám phá đến với tôi sau khi đọc nó là sự hiểu biết về cách thức hoạt động của định vị, đặc biệt là sự khác biệt giữa tuyệt đối và tương đối (tuyệt đối, tương đối). Nếu bạn đọc đến cuối, bạn sẽ biết chính xác thời điểm và cách thức hoạt động của mỗi cái. Mọi thứ đều được trình bày ở đây bằng cách sử dụng các ví dụ về danh sách và hình ảnh.
Năm giá trị định vị
Trong CSS chúng ta có danh sách năm giá trị vị trí cho các phần tử khối div:
- Tĩnh - tĩnh.
- Tương đối - tương đối.
- Kế thừa - kế thừa.
- Đã sửa - đã sửa.
- Tuyệt đối - tuyệt đối.
Hãy dọn đường một chút bằng cách loại bỏ thừa kế, đơn giản vì thuộc tính định vị này không cần phân tích cú pháp bổ sung. Nó yêu cầu phần tử kế thừa các thuộc tính của phần tử mẹ và thế là xong. Và trong các phiên bản Internet Explorer cũ hơn, nó hoàn toàn không được hỗ trợ.
Theo mặc định, định vị được đặt thành tĩnh. Bất kỳ phần tử nào có vị trí tĩnh sẽ ở vị trí mong đợi, hoàn toàn phụ thuộc vào cấu trúc của HTML.
Hiện nay đã sửa. Đây là một mỏ neo như vậy. Khi được trang bị giá trị này, các phần tử sẽ giữ nguyên vị trí chúng ta đặt chúng và sẽ không nhúc nhích ngay cả khi cuộn. Điều này thường được sử dụng để đóng băng các thanh bên điều hướng, điều này gây ảnh hưởng xấu đến nội dung.
Vì vậy, chúng tôi đã tìm ra ba giá trị định vị và có thể coi chúng là dễ hiểu. Đơn giản vì chức năng của chúng không có sự lặp lại hay biến thể. Những điều thú vị vẫn còn - tuyệt đối Và liên quan đến. Chúng ta hãy xem xét chúng một cách riêng lẻ và sau đó xem cách chúng có thể được sử dụng cùng nhau. Và điều này có thể mang lại những kết quả thú vị gì.
Định vị tuyệt đối
Định vị tuyệt đối cho phép bạn kéo một đối tượng ra khỏi luồng thông thường của tài liệu và đặt nó vào một điểm cụ thể trên trang. Hãy tạo một danh sách đơn giản - danh sách không có thứ tự.
- BỐN
Như chúng ta biết, các mục của nó đã tự động ở giá trị tĩnh. Điều này có nghĩa là chúng chảy theo luồng của các phần tử khác của tài liệu nơi chúng được đặt theo cấu trúc html của nó. Bây giờ hãy xem điều gì sẽ xảy ra nếu bạn chỉ định một trong các mục trong danh sách tuyệt đối với tọa độ bằng không.
>ul li:nth-child(4)(
vị trí: tuyệt đối;
trái: 0; hàng đầu: 0;)
Như bạn có thể thấy, nó được đưa ra khỏi luồng chung và được đặt ở góc trên bên trái của cửa sổ trình duyệt. Lưu ý rằng phần tử được định vị tuyệt đối không quan tâm liệu có phần tử khác ở vị trí đó hay không. Nó vẫn sẽ được đặt theo tọa độ.
Vì vậy, chúng ta cần định vị tuyệt đối khi cần đặt một phần tử chính xác vào vị trí trên màn hình mà chúng ta muốn nhìn thấy nó. Theo đó, vị trí của nó được đo bằng các vết lõm ở trên, phải, dưới và trái của viền cửa sổ.
Ví dụ: hãy đặt mục danh sách thứ tư tương tự với mức thụt lề 20 pixel ở bên trái và 20 pixel ở trên cùng.
ul li:nth-child(4)(
vị trí: tuyệt đối;
bên trái: 20
px; đứng đầu: 20
px;)
Di chuyển xuống một chút và sang phải. Và để xác nhận những gì đã nói rằng một phần tử có vị trí tuyệt đối không tạo ra sự khác biệt nào đối với vị trí của các phần tử khác, chúng tôi sẽ cung cấp cho nó những tọa độ sao cho tạo ra một va chạm thống nhất.
ul li:nth-child(4)(
vị trí: tuyệt đối;
bên trái: 60
px; đứng đầu: 80
px;)
Để kết luận, chúng ta hãy lưu ý hành vi của các mục còn lại trong danh sách. Khi phần thứ tư bị xóa khỏi luồng, phần còn lại sẽ tự động được căn chỉnh trong hàng đợi như thể nó không có ở đó: phần thứ ba ngay sau đó là phần thứ năm. Hãy ghi nhớ điều này và sau đó sử dụng nó để làm lợi thế cho chúng ta.
Định vị tương đối
Định vị tương đối hoạt động theo cách tương tự như định vị tuyệt đối—bằng cách đặt vị trí cho đối tượng bằng cách sử dụng tọa độ trên, phải, dưới và trái. Sự khác biệt duy nhất là điểm bắt đầu: vị trí của điểm tọa độ bằng 0. Để định vị tuyệt đối, đó là cạnh của màn hình trình duyệt. Và cho người thân?
Hãy xem nào:
ul li:nth-child(4)(
chức vụ: liên quan đến;
bên trái: 0
px; đứng đầu: 0
px;)
- BỐN
Làm sao vậy? Điểm thứ tư vẫn ở vị trí của nó trong dòng chảy của các yếu tố. Điều này là do điểm bắt đầu cho tọa độ của nó bây giờ không phải là cạnh của cửa sổ trình duyệt mà là phần tử đứng trước nó trong luồng. Anh ấy cũng là cha mẹ của anh ấy.
Bây giờ, nếu chúng ta thay đổi vị trí của đối tượng thử nghiệm thêm 20 pixel, chúng ta sẽ đánh giá rõ ràng kết quả của mối quan hệ như vậy.
ul li:nth-child(4)(
chức vụ: liên quan đến;
bên trái: 20
px; đứng đầu: 20
px;)
Điều cực đoan này có thể hữu ích trong các tình huống thực tế. Ví dụ: khi chúng ta không muốn loại bỏ một phần tử mà muốn thử đặt nó lên phần tử khác. Tuy nhiên, lưu ý rằng định vị tương đối không quan tâm đến các phần tử phía dưới giống như định vị tuyệt đối. Nhưng ở đây họ không còn thay thế những người đã ra đi nữa.
Để tất cả chúng cùng nhau
Bây giờ chúng ta đã học được các quy tắc cơ bản về hoạt động của các phần tử HTML với vị trí tuyệt đối và tương đối thông qua CSS, hãy tạo một quy tắc chính thức và đầy đủ. ví dụ rõ ràng công việc của toàn bộ điều này.
HTML
Hãy bắt đầu bằng cách tạo một khối HTML thuộc lớp “ảnh” và đặt ngay hình ảnh 200x200 pixel vào đó.
Bây giờ là lúc chuyển sang chỉnh sửa CSS của chúng ta.
CSS cơ bản
Đầu tiên, hãy thay đổi nền thành tối. Sau đó, chúng ta sẽ thêm các kiểu cơ bản cho ảnh: chúng ta sẽ tạo khung cho nó và thêm bóng.
phần thân (nền: #69C; )
Hình chụp (
đường viền: 5px màu trắng;
chiều cao: 200px; chiều rộng: 200px;
lề: tự động 50px;
/*bóng tối khó khăn nhưng thú vị*/
-webkit-
bóng hộp: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
Vâng, nói chung, đây là hình ảnh của chúng tôi. Không có gì đặc biệt nhưng sân tập đã được tạo ra.
Treo một dải băng
Hãy nói theo cách này: chúng tôi muốn tạo ấn tượng rằng các bức ảnh được dán vào tường bằng những miếng băng dính. Để làm điều này, chúng ta cần hiển thị những gì chúng ta đã học và thêm phần tử giả.
Đầu tiên, để tạo phim, chúng tôi sử dụng phần tử giả “trước” “:trước”. Cài đặt CSS của nó sẽ cho biết băng có chiều cao 20 pixel và dài 100 pixel. Hơn nữa, với nền trắng, được ấn định độ mờ 50%, đó là phim. Chà, tenya, chúng ta sẽ ở đâu nếu không có cô ấy?
Ảnh:trước (
nội dung: "scotch";
chiều cao: 20px;
chiều rộng: 100px;
}
Vâng, ở đây bộ phim sẽ không dính vào bất cứ thứ gì ngoại trừ chính nó...
Rõ ràng là chúng ta gặp vấn đề với việc định vị phần tử giả. Hãy thử khắc phục tình trạng này bằng cách sử dụng vị trí tương đối.
Ảnh:trước (
nội dung: "scotch";
chiều cao: 20px;
chiều rộng: 100px;
nền: rgba(255,255,255,0,5);
chức vụ: liên quan đến;
đứng đầu: 0
px; bên trái: 0
px;
Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
bóng hộp: 0px 1px 3px rgba(0,0,0,0.4);
}
Tuyệt vời. có tác dụng gì...
Như bạn có thể thấy, chúng tôi vẫn chưa giải quyết được vấn đề. Chà, vì việc định vị tương đối không hiệu quả, hãy chuyển sang theo hướng ngược lại và hãy thử cái tuyệt đối.
Ảnh:trước (
nội dung: "scotch";
chiều cao: 20px;
chiều rộng: 100px;
nền: rgba(255,255,255,0,5);
chức vụ: tuyệt đối;
đứng đầu: 0
px; bên trái: 0
px;
Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
bóng hộp: 0px 1px 3px rgba(0,0,0,0.4);
}
Nhưng điều này gần với chủ đề hơn.
Cuối cùng, cuốn băng đã có dạng theo yêu cầu. Nhưng hiện tại anh đang chán ở một góc nào đó. Một sự thay đổi về tọa độ ngay lập tức tự đề xuất để di chuyển nó đến nơi chúng ta cần. Nhưng đây không phải là giải pháp: băng sẽ đứng ở một điểm nhất định và bắt đầu di chuyển cùng với sự thay đổi về kích thước màn hình.
Vâng, chúng tôi đã thử cả tương đối và tuyệt đối để định vị. Nhưng chúng tôi vẫn chưa hài lòng với giải pháp này hay giải pháp kia.
Cái gì tiếp theo? Và ví dụ, câu chuyện về vị trí tuyệt đối của các phần tử vẫn chưa hoàn chỉnh. Bạn thấy đấy, góc trên bên trái của màn hình không phải lúc nào cũng là điểm tọa độ 0 cho một phần tử được định vị tuyệt đối. Thay vào đó, phần tử giả "tuyệt đối" của chúng ta sẽ được định hướng bởi đến tổ tiên không tĩnh đầu tiên. TRONG trong trường hợp này- từ bức ảnh.
Chúng ta nhận được gì từ điều này? Rất nhiều: chúng ta có thể sử dụng định vị tuyệt đối cho băng. Nhưng trước đó, chúng ta phải thay đổi điều gì đó về bố mẹ anh ấy, về bức ảnh. Và vì chúng tôi không muốn băng di chuyển tùy ý trên ảnh tùy thuộc vào độ phân giải màn hình nên chúng tôi sẽ áp dụng vị trí tương đối cho ảnh đó.
Hình chụp (
đường viền: 5px màu trắng;
chiều cao: 200px;
chiều rộng: 200px;
lề: tự động 50px;
chức vụ: liên quan đến;
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
bóng hộp: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
Ảnh:trước (
nội dung: "scotch";
chiều cao: 20px;
chiều rộng: 100px;
nền: rgba(255,255,255,0,5);
chức vụ: tuyệt đối;
đứng đầu: 0
px; bên trái: 0
px;
Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
bóng hộp: 0px 1px 3px rgba(0,0,0,0.4);
}
Vì vậy, một phần tử giả có vị trí tuyệt đối đã chọn góc trên bên trái của phần tử tổ tiên không tĩnh đầu tiên làm điểm tham chiếu cho tọa độ của nó. Cụ thể, góc của bức ảnh hoàn toàn khớp với mô tả này. Vì vậy, băng sẽ luôn bị kẹt ở góc này, ngay cả khi kích thước cửa sổ trình duyệt thay đổi.
Bây giờ chúng ta đã tìm thấy điểm bắt đầu, chúng ta có thể di chuyển băng đến vị trí mình cần bằng cách điều chỉnh giá trị bên trái và trên cùng. Lưu ý giá trị âm cho điểm trên cùng. Nhìn vào kết quả bạn sẽ hiểu tại sao. Giá trị bên trái được đặt để căn giữa băng theo chiều ngang. Ai đó “Máy tính tức thì” sẽ chỉ rõ cách tính toán này.
Ảnh:trước (
nội dung: "";
chiều cao: 20px;
chiều rộng: 100px;
nền: rgba(255,255,255,0,5);
chức vụ: tuyệt đối;
đứng đầu: -15
px; bên trái: 50
px;
Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
bóng hộp: 0px 1px 3px rgba(0,0,0,0.4);
}
Như chúng ta có thể thấy từ hình ảnh cuối cùng, sự kết hợp giữa định vị tuyệt đối và tương đối đã cho chúng ta chính xác những gì chúng ta cần để triển khai hiệu ứng mong muốn và hiểu cách hoạt động của hai thuộc tính này.
Ngoài ra hãy kiểm tra Tinkerbean. Về bản chất, đây là một công cụ tạo mã hữu ích cho nhiều hiệu ứng khác nhau.
Phần kết luận
Việc đặt các phần tử khối có thể là một nhiệm vụ thực sự khó khăn nếu không nắm vững các khái niệm cơ bản về nó. Tuy nhiên, bạn chỉ cần ghi nhớ ba điều để áp dụng và kết hợp các tham số của chúng kịp thời.
Đầu tiên là việc định vị tương đối cho phép bạn căn chỉnh bản thân theo một điểm xuất phát cụ thể. Thứ hai là bạn cũng có thể định cấu hình tương đối với tổ tiên không tĩnh đầu tiên chứ không chỉ cạnh của cửa sổ trình duyệt, như xảy ra với giá trị "vị trí: không có". Và cuối cùng: vị trí tương đối hay tuyệt đối của một vật thể đều không ảnh hưởng đến các vật thể tĩnh và cố định xung quanh nó. Chúng ta hãy nhớ từ đầu bài viết: các phần tử được định vị tuyệt đối sẽ bị loại bỏ khỏi luồng và những phần tử tương đối sẽ chiếm vị trí của người khác.
Ghi chú
- Điện thoại di động và máy tính bảng cũ không nhận biết tốt thông số định vị "đã sửa". Hay đúng hơn là họ không nhận thức được điều đó. Các menu được gán trượt trên màn hình cùng với nội dung như thể chúng "tĩnh". Với sự ra đời của iOS 5+, mọi thứ đã trở lại bình thường, nhưng không phải như trước đây.
- Ví dụ, cách mọi thứ được viết ở đây được cảm nhận bởi người thứ bảy trình duyệt web IE- Tôi thậm chí không muốn thảo luận về nó. Thậm chí còn ít mong muốn nghĩ về cách hack CSS cho nó hơn. Vì vậy, đối với con ma cà rồng, tôi đã chụp ảnh màn hình với tất cả vẻ đẹp và mã hóa chúng bằng HTML với các cấu trúc như:
Сюда тупо скрин для Эксплорера.
Và đây là mã đầy đủ cho các trình duyệt thông thường.
Vì vậy, nếu bạn không quá lười để đăng các giải pháp của mình hoàn toàn bằng CSS, thì các bình luận luôn sẵn sàng phục vụ bạn. Hãy cứu thế giới.
Xin chào các độc giả thân mến của trang blog! Đã đến lúc thêm cái mới vật liệu hữu ích và hôm nay chúng ta sẽ làm quen với cách bạn có thể đa dạng hóa vị trí của các thành phần khác nhau trên trang bằng cách sử dụng thuộc tính định vị vị trí với thông số khác nhau(tĩnh, tương đối, tuyệt đối, cố định).
Ngoài ra, trong khuôn khổ chủ đề đã thảo luận ở trên, chúng tôi sẽ xem xét cách bạn có thể đặt một hoặc một thụt lề khác sang phải, trái, lên hoặc xuống bằng cách sử dụng các thuộc tính tương ứng left, right, top và Bottom bằng cách gán cho chúng các giá trị số cần thiết .
Hãy để tôi nhắc bạn rằng chúng ta có thể xem xét bất kỳ trang web nào theo thứ tự. Chúng xác định diện mạo của một phần tử cụ thể, nhưng vị trí của chúng được quyết định bởi một bộ quy tắc dành cho các biểu định kiểu xếp tầng, cuối cùng tạo ra một bức tranh hoàn chỉnh.
Xác định vị trí phần tử và vị trí bình thường (vị trí tĩnh)
Đối với tài sản vị trí có bốn giá trị (tĩnh | tương đối | tuyệt đối | cố định), xác định phương pháp định vị. Như bạn có thể biết, các tham số của hầu hết các quy tắc CSS có thể được thu thập từ trang đặc tả W3 chính thức, trong đó trọn bộ thuộc tính và giá trị của chúng, bao gồm cả vị trí:
Định vị là vị trí của một phần tử trong hệ tọa độ. Dựa trên các giá trị của thuộc tính vị trí, có thể phân biệt bốn loại định vị: bình thường, tuyệt đối, tương đối và cố định.
Sử dụng vị trí và những vị trí tôi đã đề cập ở trên trái, phải, trên, dưới (thụt lề trái, phải, lên, xuống tương ứng) bạn có thể điều chỉnh vị trí của các phần tử so với nhau, cố định chúng ở một vị trí nhất định hoặc thậm chí chồng phần tử này lên phần tử khác.
Hơn nữa, việc định vị có thể được kiểm soát thông qua các tập lệnh. Điều này cho phép thêm động lực vào bất kỳ phần tử nào cũng như tạo hoạt ảnh và các hiệu ứng khác.
Nếu vị trí bị thiếu hoặc được đặt thành tĩnh, phần tử sẽ được hiển thị bình thường như một phần của luồng HTML. Nghĩa là, tất cả các thành phần của trang web được hiển thị theo trình tự có trong mã nguồn trang.
Tóm lại, tôi lưu ý rằng các giá trị không phải là giá trị tĩnh cho phép bạn thay đổi cách sắp xếp tiêu chuẩn của các thành phần web trên trang, điều này rất quan trọng trong việc giải quyết các vấn đề về bố cục không hề tầm thường. Nhân tiện, một công cụ khác có thể thay đổi thứ tự thông thường là bạn có thể tạo các phần tử nổi.
Vị trí tuyệt đối
Vì vậy, hãy tiếp tục phân tích sắc thái kỹ thuậtđịnh vị tuyệt đối, được xác định bởi tham số tuyệt đối của thuộc tính vị trí:
Vị trí: tuyệt đối
Điều quan trọng là phải hiểu rằng trong trường hợp này phần tử sẽ không được hiển thị trên luồng tiêu chuẩn. Theo đó, chúng ta có cơ hội xác định vị trí của nó trong hệ tọa độ tuyệt đối bằng cách đặt thụt lề từ các cạnh của cửa sổ trình duyệt bằng cách sử dụng trái, phải, trên, dưới:
Ở đây A, B, C và D là giá trị số của vết lõm. Bây giờ hãy xem các tính năng của giá trị tuyệt đối: ví dụ cụ thể. Hãy lấy 2 cái tương ứng, chúng ta sẽ gán các tham số (màu nền), chiều rộng (chiều rộng) và chiều cao (chiều cao). Để đơn giản, chúng tôi sẽ sử dụng , được triển khai bằng thuộc tính style.
Không giống như các kiểu được liên kết, là kiểu tối ưu nhất trong thực tế, phương pháp này liên quan đến việc đặt các quy tắc CSS không phải trong một tệp riêng biệt mà ở dạng các giá trị thuộc tính STYLE được gán cho thẻ mong muốn. Đồng thời, để đảm bảo tính thuần khiết của thử nghiệm, hiện tại chúng tôi sẽ không thêm vị trí tuyệt đối:
Tôi đã nói cao hơn một chút rằng việc không có vị trí mặc định tương đương với việc tham số tĩnh được chỉ định cho thuộc tính này. Tức là tất cả các phần tử được hiển thị theo trình tự thông thường. Theo đó, trong trường hợp của chúng tôi, các vùng chứa sẽ được sắp xếp theo thứ tự (trong luồng HTML tiêu chuẩn):
Hãy để tôi nhắc bạn rằng có một quy tắc để tổ chức và tối ưu hóa các biểu định kiểu xếp tầng trong CSS: phần tử con tài sản của cha mẹ. Do đó, trong trường hợp này, thẻ khối chiếm một vị trí không có phần đệm và bên trong phần tử gốc.
Chuyện gì đã xảy ra thế? Sau khi áp dụng định vị tuyệt đối cho yếu tố cụ thể tất cả các khối khác của trang web đều ngừng "chú ý" đến nó và hoạt động như thể nó không tồn tại. Hơn nữa, chúng tôi vẫn chưa chỉ định các giá trị bù bằng trái, phải, trên và (hoặc) dưới.
Và trong trường hợp này, sau khi áp dụng tham số tuyệt đối cho nó, phần tử web vẫn giữ nguyên vị trí, trong khi phần tử lân cận của nó (trong ví dụ của chúng tôi là khối màu dưới cùng) di chuyển lên trên. Kết quả là một phần tử được chồng lên một phần tử khác. Bây giờ chúng ta hãy thử chỉ định lề trái cho phần tử web được định vị tuyệt đối left:0, kết quả là chúng ta nhận được kết quả này:
Vì vậy, nếu bạn chỉ định giá trị 0 cho phần đệm, thì phần tử web có tham số định vị tuyệt đối sẽ vượt ra ngoài phần tử gốc và bám vào mép của cửa sổ trình duyệt. Tùy thuộc vào tập thuộc tính (trái, phải, trên, dưới), đây sẽ là giới hạn bên trái, bên phải, trên hoặc dưới.
Hơn nữa, cần lưu ý rằng bên trái có lợi thế hơn bên phải và trên hơn dưới. Nếu chúng xung đột với nhau thì giá trị bên phải và bên dưới tương ứng sẽ bị bỏ qua. Tiếp tục nào. Bước tiếp theo Hãy viết một giá trị dương cho bên trái của vùng chứa trên cùng:
Trong trường hợp này, sẽ có một khoảng lệch về bên phải tính từ cạnh trái của khung nhìn, được xác định bởi thẻ tài liệu HTML. Hãy hệ thống hóa và lưu ý từng điểm một số đặc điểm về hành vi của một thành phần web khi gán cho nó một vị trí tuyệt đối:
- Nếu kích thước khối không được chỉ định rõ ràng theo chiều rộng và chiều cao thì chúng sẽ tương ứng với kích thước nội dung, bao gồm các giá trị đường viền và phần đệm;
- Một thành phần web sẽ không thay đổi vị trí của nó nếu nó không được chỉ định các giá trị trái, phải, trên hoặc dưới;
- Như đã nói, bên trái có nhiều hơn ưu tiên cao trước bên phải và trên cùng trước dưới cùng;
- Nếu bạn chỉ định giá trị âm bên trái hoặc trên cùng cho một phần tử, khối sẽ nằm ngoài khung nhìn. Thanh cuộn sẽ không xuất hiện. Sắc thái này có thể được sử dụng để xóa phần tử web khỏi chế độ hiển thị;
- Nếu bên trái được chỉ định bằng giá trị lớn hơn chiều rộng của khung nhìn hoặc nếu bên phải được chỉ định làm giá trị âm thì cuộn ngang. Điều tương tự cũng xảy ra với cặp trên và dưới;
- Tuy nhiên, chiều rộng của khối định vị tuyệt đối được hình thành bằng cách sử dụng trái và phải, tuy nhiên, chỉ khi chiều rộng không được chỉ định. Tương tự, chiều cao của một phần tử được hình thành bằng cách sử dụng đỉnh, đáy và chiều cao;
- Phần tử web có tham số tuyệt đối sẽ di chuyển đồng thời với trang khi nó được cuộn
Tôi nghĩ tôi đã sắp xếp mọi thứ liên quan đến định vị tuyệt đối và bạn có thể tự mình xác định điều gì công dụng thực tế các phần tử có thuộc tính này có thể có. Tuy nhiên, theo thông tin, tôi sẽ nói rằng bằng cách sử dụng thuộc tính vị trí có giá trị tuyệt đối, bạn có thể tạo các khối có khung bằng cách thêm quy tắc tràn với tham số tự động. Ngoài ra còn có tùy chọn nhận chú giải công cụ cho ảnh hoặc hình ảnh.
Vị trí tương đối
Nếu một phần tử có thuộc tính vị trí được gán tham số tương đối được đặt ở trái, phải, trên hoặc dưới, nó sẽ thay đổi vị trí so với vị trí ban đầu. Hơn nữa, giá trị dương bên trái sẽ di chuyển phần tử web sang bên phải đường viền bên trái của nó và giá trị âm sẽ di chuyển phần tử web sang bên trái. Các dịch chuyển tương tự xảy ra khi áp dụng thuộc tính trên cùng, chỉ trong mặt phẳng thẳng đứng (trong trường hợp giá trị dương xuống, âm - up):
Để có một ví dụ giúp thể hiện rõ ràng tác dụng của loại thuộc tính vị trí này, hãy lấy hai vùng chứa, một trong số đó sẽ được di chuyển sang bên trái bằng thuộc tính float:left và nội dung văn bản của vùng chứa thứ hai sẽ chảy xung quanh khối này. Để rõ ràng, hãy cung cấp cho các thành phần này một nền, kích thước sử dụng chiều rộng và chiều cao cũng như các lề cần thiết bằng cách sử dụng thuộc tính lề:
Nó sẽ trông giống thế này:
Bây giờ chúng ta thêm vị trí tương ứng với quy tắc CSS cho khối đầu tiên, cũng như các khoảng lệch về bên phải (trái) và xuống dưới (trên cùng) để vị trí tương đối tạo ra kết quả:
Kết quả là giao diện kết quả sẽ như thế này:
Như bạn có thể thấy, khối đã dịch chuyển dọc theo tham số đã cho. Tuy nhiên, phần tử liền kề không phản ứng với điều này và văn bản vẫn chảy xung quanh vùng chứa đã di chuyển như thể nó vẫn ở vị trí ban đầu.
Với sự trợ giúp của ví dụ được cung cấp, tôi nghĩ rõ ràng cách thức hoạt động của định vị tương đối, tuy nhiên, ứng dụng thực tế trong thể tinh khiết thật khó để anh ta tìm thấy. Từ quan điểm này, tùy chọn tương tác giữa các tham số tuyệt đối và tương đối được yêu cầu nhiều hơn, điều mà chúng ta sẽ thảo luận dưới đây.
Sử dụng vị trí tuyệt đối và tương đối cùng nhau
Bây giờ hãy xem xét kết quả nào có thể đạt được bằng cách sử dụng kết hợp hai loại định vị. Nếu bạn gán giá trị tương đối cho phần tử cha và giá trị tuyệt đối cho phần tử con thì hệ tọa độ sẽ được thay thế và vị trí của phần tử web con sẽ được xác định tương ứng với phần tử mẹ của nó:
Để làm ví dụ về cách sử dụng thực tế sự kết hợp hai loại định vị này, tôi sẽ cung cấp cho bạn blog của tôi, nơi gần đây tôi đã triển khai lớp phủ tiêu đề và mô tả trên hình ảnh tiêu đề. Ban đầu bức ảnh trông như thế này:
Để thực hiện nhiệm vụ, tôi đã làm như sau. Đầu tiên, tôi viết trong STYLE.CSS của chủ đề của mình thuộc tính vị trí tương đối cho lớp “site-header” của thẻ HEADER gốc:
Ngoài ra, để có đầu ra chính xác, tôi phải xác định độ rộng của khối bằng lớp “mô tả trang web” bằng cách chỉ định giá trị chiều rộng:
Sau đó, đối với lớp “xây dựng thương hiệu trang web” của vùng chứa con DIV, tôi đã chỉ định vị trí tuyệt đối cũng như chỉ định lề trái và lề trên, điều này sẽ xác định vị trí của phần tử trong trường hợp này không phải theo thuật ngữ tuyệt đối (liên quan đến cửa sổ trình duyệt) , nhưng liên quan đến vị trí của cha mẹ.
Cũng cần phải xóa thuộc tính “text-align:center” khỏi bộ quy tắc CSS cho thẻ này để căn chỉnh văn bản tiêu đề và mô tả ở bên trái. Nhờ sự tương tác giữa định vị tương đối và tuyệt đối, vấn đề đã được giải quyết và văn bản bắt buộcở dạng tiêu đề và mô tả blog được xếp chồng lên hình ảnh tiêu đề:
Ngoài ví dụ tôi đề xuất, việc sử dụng mối quan hệ tương đối tuyệt đối có thể được thực hiện trong trường hợp chung những nhiệm vụ như vậy liên quan đến sự xuất hiện và biến mất của một số thành phần web nhất định. Hơn nữa, trong trường hợp này, chúng sẽ không can thiệp vào việc hiển thị chính xác phần còn lại các thành phần trang web.
Ví dụ: một trường hợp đặc biệt có thể là tạo menu thả xuống trên trang web. Nó hoạt động như thế này. Nếu bạn di chuyển con trỏ chuột đến mục menu chính, một khối được định vị tuyệt đối sẽ xuất hiện, được tạo trên cơ sở HTML tiêu chuẩn. Sự xuất hiện của nó được đảm bảo bởi thực tế là tham số tương đối của thuộc tính vị trí được gán cho thẻ tương ứng.
vị trí cố định
Chà, tham số cuối cùng của thuộc tính vị trí giúp cố định các thành phần web cần thiết trên trang. Về nguyên tắc, kiểu định vị này rất giống với định vị tuyệt đối, điểm khác biệt duy nhất là một phần tử có giá trị cố định được gắn vào một vùng cụ thể trên màn hình trong cửa sổ trình duyệt bằng cách sử dụng trái, phải, trên, dưới. Nó vẫn ở đúng vị trí ngay cả khi bạn cuộn trang.
Một ví dụ rất minh họa sẽ là tài liệu về sử dụng vị tríđã sửa, bạn có thể đọc về điều này bằng cách truy cập trang bằng liên kết được cung cấp. Tôi khuyên bạn nên tự làm quen với tài liệu này, ngay cả khi bạn không có ý định triển khai thanh điều hướng như vậy trên tài nguyên web của mình, vì ví dụ này rất minh họa và giúp hiểu bản chất của định vị cố định.
Ngoài việc thực hiện menu nổi, vị trí cố định được sử dụng khi tạo nhiều loại khác nhau tiêu đề, tab, hình ảnh. Nói một cách dễ hiểu, để bảo mật các khối đó trên một trang web quan trọng nhất từ quan điểm cải thiện đặc điểm hành vi của người dùng, tăng khả năng chuyển đổi của một dự án thương mại, v.v.
Việc xuất bản đã đi đến kết luận hợp lý của nó. Trong bài viết tiếp theo, tôi dự định đề cập đến các sắc thái của việc sử dụng thuộc tính, các giá trị của thuộc tính này ảnh hưởng đến vị trí của các khối được định vị trên trang web. Trên thực tế, đây sẽ là phần tiếp theo của tài liệu ngày nay. Tóm lại, tôi muốn nhắc bạn rằng bạn có thể ghi nhận nỗ lực của tác giả bằng cách nhấp vào nút xã hội ngay bên dưới và bày tỏ ý kiến của bạn về tính hữu ích của thông tin được đưa ra trong các bình luận.
