Vị trí tương đối - đó là những gì? mô tả chi tiết

Làm tổ HTML - một quá trình lâu dài, chặt chẽ, nhưng rất sáng tạo. Mặc dù thực tế rằng đối với đa số người có việc làm trong lĩnh vực CNTT, các trang web bố trí có vẻ thói quen nhàm chán, các chuyên gia có một ơn gọi cho một trường hợp như vậy, không chỉ chất lượng thực hiện nhiệm vụ, mà còn nhận được từ quá trình của niềm vui hữu hình.

Tuy nhiên, trước khi bạn trở thành một coder có kinh nghiệm, mỗi người mới dành rất nhiều thời gian nghiên cứu các hướng dẫn khác nhau và các thông số kỹ thuật của cả hai ngôn ngữ HTML, và đồng minh của nó - CSS. Về chính xác những gì CSS, nó là gì và những gì "tai feint" cho phép bạn thức dậy, cũng là một trong những đặc tính hàng đầu của nó - Chức vụ tương đối - hôm nay chúng ta sẽ nói chuyện.

CSS là gì?

CSS viết tắt có thể được sao chép lại và dịch sang tiếng Nga là "cascading style sheets". Nghe có vẻ khá lạ - một mặt, có vẻ như rõ ràng, và lời nói, và mặt khác - ý nghĩa chung là không ngay lập tức bị bắt. Hãy bắt đầu với đơn giản - với phong cách. Công nghệ này cho phép bạn đính kèm các đối tượng trên trang, đặc điểm nhất định liên quan đến sự xuất hiện rằng bạn chỉ có thể đăng ký một lần và sử dụng một số lượng vô hạn của thời gian.

Từ "bảng" trong bản dịch chính thức xuất hiện gần như một cách tình cờ - trong thực tế phù hợp hơn đây sẽ được sử dụng từ "danh sách" hoặc "danh sách", tuy nhiên các tác giả của bản dịch ban đầu quyết định rằng CSS trông giống như hơn một danh sách, và chúng ta là ai như bây giờ là để thử chúng.

Cuối cùng, từ "Cascade". Thực tế là mỗi phần tử có thể có nhiều kiểu có thể được trộn hoặc thậm chí chồng chéo lên nhau. Trong trường hợp này, trình duyệt phải dùng đến một bộ quy tắc, để soạn sự xuất hiện của khối, mà hóa ra là một vài phong cách, với một trong số họ, ví dụ, có một vị trí bất động sản tương đối, và người kia - Chức vụ Absolute. Trong thực tế, mâu thuẫn như vậy không thể được dung thứ, nhưng trong các dự án lớn nhầm lẫn như vậy xảy ra khá thường xuyên.

Vì vậy, bây giờ, khi mọi thứ đều rõ ràng ngay từ cái tên, chúng ta hãy xem xét một ví dụ đơn giản. Hãy nói rằng trang web của bạn phải là một số lượng lớn các nút, được thiết kế theo một cách nhất định. Họ có đặc tính như kích thước, bóng, mờ, màu sắc. Tất nhiên, bạn có thể chỉ định các tham số, tạo từng nút, nhưng là dễ dàng hơn để sử dụng CSS. Trong thực tế, bạn cần phải mô tả một lớp nhất định, trong đó liệt kê các giá trị của tất cả các đặc tính trên, và sau đó, thay vì một danh sách dài, thẻ của mỗi nút sẽ chỉ cần phải xác định tên của lớp, sau đó trình duyệt tự nó sẽ màu các phần tử trong màu mong muốn và cung cấp cho họ một thích hợp "bóng".

tài sản trí làm việc gì?

Bây giờ chúng ta đi thẳng đến vị trí bất động sản, vì lợi ích của được bắt đầu toàn bộ bài viết này. Nếu bạn đã quen thuộc với ngôn ngữ tiếng Anh, hoặc có một trực giác tốt, sau đó bạn đã phải rõ ràng - khách sạn này là chịu trách nhiệm cho vị trí của mặt hàng đó. Trong thực tế, cách nó được, nhưng thay vào đó xác định vị trí cụ thể, khách sạn này cho trình duyệt làm thế nào nó nên được đặt một hoặc một yếu tố khác liên quan đến liền kề hoặc trên trang như một toàn thể.

Có gì giá trị có thể là tài sản Chức vụ?

bất động sản có thể chấp nhận các giá trị khác nhau của chúng tôi, chỉ có năm là. Dưới đây là một mô tả ngắn gọn của từng:

• Chức vụ Kế thừa. Tính năng này cho phép bạn sao chép các dữ liệu về vị trí của các yếu tố đó là cha mẹ. Ví dụ, nếu bạn có một div với một tương đối vị trí quy định, sau đó nhập vào nó với giá trị kế thừa IMG cũng sẽ được thiết lập để tương đối.
• Vị trí tĩnh. Giá trị này được đưa ra cho tất cả các yếu tố tự động, trừ khi nói nữa. Các yếu tố phù hợp với vị trí như đã đề cập trong các mã và không có sẵn cho một loạt các "rườm rà", cho phép thay đổi vị trí của họ.
• Chức vụ Absolute. Bởi giá trị này thuộc tính Chức vụ là khá thường xuyên được sử dụng trong trường hợp nó là cần thiết để tạo ra một "nổi" phần tử. Với một giá trị nhất định của mặt hàng đó tài sản là "vô hình" đối với các thành phần khác của trang. Đó là, họ được bố trí như thể yếu tố tuyệt đối của chúng tôi không tồn tại. Bản thân ông sẽ luôn luôn tại chỗ, bất kể thế nào đến nay được trang cuộn.
• Chức vụ cố định. Trong nhiều cách, giá trị này là tương tự như trước đó, tuy nhiên, trong khi các yếu tố tuyệt đối được ràng buộc với phụ huynh, cố định sử dụng chỉ có tọa độ góc trên bên trái của màn hình trình duyệt, bỏ qua phần còn lại của các yếu tố có trước nó.
• Cuối cùng, vị trí tương đối. loại giá trị này cho phép yếu tố vị trí tương đối so với người kia, mà có thể hữu ích cho việc tạo ra một ký hiệu đánh dấu adaptive gọi "cao su" chung. Với thuộc tính này, mặt hàng sẽ "đẩy" người kia, mà không làm mất khả năng thay đổi vị trí của họ trên trang.

Làm việc với các vị trí trong các trình duyệt khác nhau

Không phải tất cả các trình duyệt tương thích nhau. Trong khi hầu hết các chương trình thay thế cho lướt Internet mà không cần bất kỳ cản trở giá trị của vị trí coi là hoàn toàn đúng, "kinh niên đặc biệt» Internet Explorer coi tài sản, tùy thuộc vào phiên bản của nó.

Ví dụ, bằng cách sử dụng đã "chôn" trình duyệt IE6, bạn không thể sử dụng giá trị cố định và Kế thừa - "con lừa", họ chỉ đơn giản là bỏ qua nó. Tuy nhiên, bất chấp thực tế rằng phiên bản thứ bảy của tình hình bắt đầu cải thiện, và cố định đã được xử lý, để Inherit yêu quý "trình duyệt để tải về các trình duyệt khác," đạt chỉ trong hiện thân thứ tám của nó.

Phần còn lại của các nhà quan sát bình tĩnh xử lý Chức vụ với phiên bản đầu tiên, với ngoại lệ của Opera, trong đó đã có sự hỗ trợ của các thuộc tính trong 4 biến thể của nó, được công bố vào giữa những năm 90.

Làm việc với các vị trí trong Javascript

Trong thực tế, những câu chuyện làm thế nào để làm việc với các tài sản trí trong Javascript được, chúng tôi đã bao gồm chỉ vì lợi ích của đoan. Bởi vì tài sản này không có bất kỳ ký tự đặc biệt trong tiêu đề, bạn có thể sử dụng JS mà không cần bất kỳ thay đổi, ví dụ, để thiết lập các div vị trí tương đối, nên bao gồm một dòng như thế này: div.style.position = 'tương đối'.

Như bạn thấy, nó khá đơn giản.

Tại sao Chức vụ giá trị tương đối đặc biệt chú ý?

Trong khi hầu hết các giá trị bất động sản Chức vụ, để đặt nó nhẹ nhàng, "tranh cãi" trên các yếu tố xung quanh, sử dụng giá trị "vị trí phong cách: tương đối", nên luôn luôn nhớ về toàn bộ trang như một toàn thể, bởi vì sử dụng không đúng có thể mạnh mẽ "nghiêng" toàn bộ nội dung của màn hình .

Bên cạnh đó, khách sạn này chỉ cho phép bạn dễ dàng chuyển đổi thích nghi thiết kế cố định, bởi vì ứng dụng của nó sẽ tự động ảnh hưởng đến tất cả các trang nội dung. Sau đó, chúng tôi vẫn có thời gian để xem xét các ví dụ và các lỗi sử dụng giá trị này, và bạn sẽ thấy ý nghĩa hữu hình của nó trong thực tế.

Khi bạn nên sử dụng vị trí tương đối?

Ngoài việc bố trí truyền thống của các trang HTML, vị trí tương đối thường được sử dụng để tạo ra một loạt các hiệu ứng thú vị. Ví dụ, nếu bạn muốn một mục "đến" trên một trang hoặc, ngược lại, dần dần đi xa hơn lãnh thổ của mình, đó chính là tài sản này có thể giúp bạn thực hiện điều này "lừa".

Những "thủ thuật" được thực hiện thông qua Javascript là, hoặc, nếu bạn đặt mục tiêu cho việc áp dụng tiến bộ, thông qua các thuộc tính của CSS3, cho phép bạn điều chỉnh sự thay đổi có tính chu kỳ trong giá trị của một biến cụ thể.

Ngoài ra, trong một số trường hợp có thể tạo ra tương đối giá trị "lai" Vị trí. CSS, mặc dù không phải cùng một lúc cho phép bạn thiết lập một cái gì đó giống như position: relative tuyệt đối, nhưng bằng cách sử dụng một số thủ thuật, nó vẫn còn có thể đạt được hiệu ứng này. Cách tiếp cận này có thể hữu ích trong trường hợp bạn cần phải tạo ra một cái gì đó phức tạp như một tooltip hoặc menu pop-up. Xét các ví dụ, chúng tôi sẽ cung cấp cho một mô tả về cấu trúc của một ví dụ "lai".

Các ví dụ của việc sử dụng bảng xếp hạng tương đối

Vị trí tương đối - nó khá đơn giản, nhưng công cụ linh hoạt cho phép bạn thực hiện một loạt các hiệu ứng thú vị. Để không lãng phí thời gian và địa điểm để viết mẫu mã vô dụng, chúng tôi trình bày các thuật toán uống nhiều, mà có thể trang trí trang web của bạn hoặc các trang cụ thể.

Hãy bắt đầu với "cạn kiệt" dòng. Giả sử bạn có một nhu cầu cho một yếu tố mà sẽ "du lịch" vì cạnh trái của màn hình và từ từ di chuyển nó về phía bên phải. Để thực hiện một "cơ chế" như vậy nên đặt position: relative; trái: -100px, nơi -100 - số tương đối của các điểm ảnh tạo thành chiều rộng khối. Phong cách này sẽ cho phép bạn ẩn các đơn vị bên ngoài của màn hình, đặt nó trong "bắt đầu từ vị trí". Bây giờ bạn có thể sử dụng một kịch bản mà sẽ tăng mỗi vài mili giây còn lại giá trị tài sản trên một đơn vị chừng nào nó không trở thành tương đương với chiều rộng của cửa sổ trình duyệt trừ đi chiều rộng của phần tử. Kết quả là một đơn vị đó đi ra mép trái, cuộn trên màn hình và "đậu" trong tay phải của mình.

Một ví dụ khác cho phép bạn tạo ra "tương đối-tuyệt đối" yếu tố. Ví dụ, bạn có thể nhập một tuyệt đối bên trong khác, có tương đối vị trí. Kết quả là, chúng ta có một khối "tương đối" mà không có kích thước mà tuyệt đối được ghi, bây giờ có thể đơm hoa kết trái ở một vị trí độc lập của phần tử trước đó.

sai lầm điển hình khi sử dụng tương đối Chức vụ

Sai lầm thường gặp nhất khi sử dụng tương đối Chức vụ là nhiều nhà thiết kế web quên đi khả năng dự trữ một vị trí trong đơn vị, trong đó có thể được đặt ở bất cứ đâu. Ví dụ, nếu bạn có một khá lớn, được đặt bên ngoài của màn hình và có một vị trí tương đối, ở chỗ của nó sẽ là một "lỗ" hổng. Tuy nhiên, ngay cả khách sạn này đôi khi tạo ra sự bất tiện nhất định có thể được sử dụng cho tốt, ví dụ, tạo ra một hiệu ứng thú vị của "tự lắp ráp" của các trang web, nơi mà tất cả các khối của nó đang dần được đặt ở vị trí top: 0; trái: 0; t. e. vị trí ban đầu của nó.