Bỏ qua đến nội dung chính

Cách hiểu vị trí tương đối trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Thuộc tính vị trí tương đối có lẽ là bí ẩn nhất trong các loại vị trí. Tuy nhiên, một khi chúng tôi hiểu cách thức hoạt động của nó, chúng tôi có thể sử dụng lợi thế của mình khi thiết kế bố cục với Divi. Bạn sẽ học được những điều mới trong hướng dẫn này.

Thật vậy, trong hướng dẫn này, chúng ta sẽ thảo luận:

  • Tổng quan về bốn loại định vị Divi
  • Vị trí tương đối "vị trí" một yếu tố trên Divi
  • 4 lý do biện minh cho việc sử dụng vị trí tương đối trên Divi
  • Vị trí tương đối so với lề
  • Vị trí tương đối so với Transformer Translate

Trình bày bốn loại định vị của Divi

Vị trí tương đối là một trong bốn loại vị trí có sẵn trong Divi. Dưới đây là một cái nhìn tổng quan nhanh về từng người trong số họ dưới đây.

Tĩnh (mặc định)

Về mặt kỹ thuật, các phần tử tĩnh không được "định vị" vì chúng vẫn tồn tại với dòng chảy hoặc thứ tự bình thường của các phần tử trên trang và chúng không phản ứng với các thuộc tính trên, phải, dưới và trái như các phần tử định vị khác (c ' đây là lý do tại sao Divi không có sẵn các phần tử ở vị trí tĩnh / mặc định). Trong Divi, khi chúng tôi chọn vị trí mặc định cho mô-đun, chúng tôi chọn vị trí tĩnh. Cũng cần đề cập rằng một số phần tử Divi (như đường và phần) sẽ có vị trí tương đối theo mặc định (không phải vị trí tĩnh).

họ hàng

Các mục được định vị tương đối giống như các mục tĩnh ở chỗ chúng tuân theo dòng chảy bình thường của trang. Sự khác biệt chính là các yếu tố vị trí tương đối có thể được định vị bằng cách sử dụng các thuộc tính trên, dưới, trái và phải. Ngoài ra, không giống như các yếu tố tĩnh, chúng cũng có thể được định vị bằng cách sử dụng thuộc tính Z Index.

tuyệt đối

Một phần tử được định vị tuyệt đối để lại luồng tài liệu bình thường và do đó không có không gian thực được tạo trên trang cho phần tử. Chúng ta có thể coi nó như một yếu tố nổi bên trên các yếu tố khác của trang chiếm không gian thực. Nó sẽ được định vị tương đối với container cha mẹ gần nhất.

đã sửa

Giống như vị trí tuyệt đối, các yếu tố với vị trí cố định sẽ rời khỏi luồng bình thường của trang và sẽ không có không gian thực được tạo trong trang. Sự khác biệt chính giữa tuyệt đối và cố định là vị trí cố định có liên quan đến cửa sổ hoặc cửa sổ trình duyệt. Nói cách khác, bất kể mục đó nằm ở đâu trong dòng chảy bình thường của trang, một khi nó đã nhận được một vị trí cố định, vị trí của nó sẽ được liên kết trực tiếp với cửa sổ trình duyệt. Chúng ta có thể sử dụng các thuộc tính trên cùng, dưới cùng, bên trái và bên phải để định vị phần tử trong cửa sổ. Vì các yếu tố cố định thường di chuột phía sau hoặc phía trước các yếu tố khác trên trang, Z Index sẽ giúp phân loại các yếu tố cố định trên các yếu tố khác.

LƯU Ý: Có một loại định vị khác trong CSS gọi là dính. Một mục có vị trí dính hoạt động giống như một mục tương đối được định vị cho đến khi chúng ta cuộn đến vùng chứa của nó (tại một thời điểm được xác định bởi giá trị hàng đầu). Sau đó, phần tử trở nên cố định (hoặc bị chặn) cho đến khi người dùng cuộn đến cuối container. Tuy nhiên, vị trí dính có thể hơi khó đoán vì các yếu tố khác có thể ức chế chức năng. Trong Divi, tùy chọn dính không có sẵn trong các tùy chọn tích hợp vì lý do này. Tuy nhiên, có nhiều cách để sử dụng "vị trí: dính" trong Divi.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

Vị trí tương đối "vị trí" một yếu tố trên Divi

Như đã đề cập trong phần tổng quan, loại vị trí tương đối giống với "vị trí" tĩnh vì phần tử vẫn nằm trong luồng bình thường của tài liệu. Sự khác biệt thực sự là một khi chúng ta gán một phần tử cho vị trí tương đối, giờ đây nó có các tùy chọn mới có sẵn để định vị phần tử. Các tùy chọn này bao gồm các thuộc tính trên cùng, dưới cùng, bên trái và bên phải cũng như thuộc tính Z Index.

Trong Divi, các tùy chọn vị trí bổ sung này có thể được tìm thấy trong nhóm tùy chọn vị trí một khi vị trí tương đối đã được chọn.

Sử dụng offset với vị trí tương đối

Các giá trị Offset Origin và Offset sẽ phối hợp với nhau để định vị phần tử của chúng ta ở nơi chúng ta muốn trong vùng chứa cha. Trong ví dụ này, chúng ta có một mô-đun có vị trí tương đối, phần bù ở phía trên bên trái, phần bù dọc là 25 pixel và phần bù ngang là 25 pixel. Lưu ý cách các giá trị offset sẽ di chuyển phần tử từ gốc bù theo chiều ngang và / hoặc theo chiều dọc.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

Đây là cùng một mô-đun với cùng một độ lệch nhưng có nguồn gốc bù ở phía trên bên phải.

Đây là cùng một mô-đun với cùng độ lệch và nguồn gốc bù ở phía dưới bên phải.

Và đây là cùng một mô-đun với cùng độ lệch và nguồn gốc bù ở phía dưới bên trái.

Không có khoảng cách bất ngờ

Với định vị tương đối, không gian thực tế của phần tử vẫn ở vị trí ban đầu sau khi phần tử đã được di chuyển bằng cách sử dụng các độ lệch (trên, dưới, trái, phải). Vị trí mới của phần tử không di chuyển và không ảnh hưởng đến khoảng cách của phần tử còn lại trên trang. Về cơ bản, nó di chuyển trên các yếu tố khác giống như một linh hồn đã rời khỏi cơ thể của nó.

Tại sao sử dụng vị trí tương đối

Lý do 1: Để tạo một thùng chứa cha cho các phần tử được định vị tuyệt đối

Đây có lẽ là ứng dụng phổ biến nhất của loại vị trí tương đối. Vì bất kỳ phần tử được định vị tuyệt đối nào đều liên quan đến tổ tiên được định vị gần nhất, chúng ta có thể chọn tạo một trong các phần tử được định vị đơn giản bằng cách đặt cho nó một vị trí tương đối (vị trí tĩnh mặc định không phải là về mặt kỹ thuật "định vị"). Điều này giữ cho dòng tài liệu ở đúng vị trí (như tĩnh) và cho phép chúng tôi chọn một thùng chứa cho các mục tuyệt đối.

Lý do 2: Để di chuyển các mục mà không ảnh hưởng đến các mục khác trên trang.

Với vị trí tương đối, chúng ta có thể sử dụng các độ lệch để đẩy các phần tử thẳng hàng mà không ảnh hưởng đến các phần tử khác. Và với Divi, chúng ta có thể tận dụng giao diện người dùng có thể di chuyển để định vị trực quan các yếu tố trong thời gian thực.

Lý do 3: Để sử dụng chỉ số Z để chồng lấp các yếu tố khác

Theo mặc định, các phần tử tĩnh không thể được sắp xếp lại theo trục z, trừ khi vị trí tương đối được trao cho chúng. Khi ở vị trí tương đối, phần tử sẽ vẫn được định vị trong luồng thông thường của tài liệu. Chỉ bây giờ chúng ta có thể tận dụng việc lập chỉ mục Z để đặt các phần tử theo thứ tự cụ thể khi chúng trùng nhau.

Lý do 4: Để tránh sử dụng lề âm cho mục đích vị trí

Định vị tương đối sẽ để lại phía sau không gian của vị trí ban đầu. Tuy nhiên, với một lề âm, cả nội dung và không gian ban đầu của nó đều được di chuyển. Ví dụ: nếu chúng ta thêm một lề trên âm vào một dòng trong Divi để dòng này chồng lên dòng trên nó, tất cả các dòng / nội dung sẽ di chuyển cùng với nó. Điều này để lại một chút hỗn độn để dọn dẹp có thể tránh được bằng cách sử dụng dịch chuyển vị trí tương đối thay thế.

Nếu chúng ta đặt cùng một mô-đun một vị trí tương đối, chúng ta có thể sử dụng bù dọc để đưa mô-đun lên mà không ảnh hưởng đến phần còn lại của không gian trên trang.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

Mặc dù tôi thường sử dụng lề âm để định vị các mục trong Divi, nhưng có lẽ không nên dùng nếu chúng ta có thể sử dụng định vị tương đối thay thế. Lề liên quan đến mô-đun hộp của phần tử, do đó, nó thực sự có ý định thêm khoảng cách trong và xung quanh chính phần tử, không quá nhiều để định vị phần tử bù từ phần chứa chính của nó như đối với định vị tương đối.

Tóm tắt

Rất có khả năng cuối cùng, bạn không hiểu nhiều. Có lẽ khía cạnh đáng ngạc nhiên nhất của việc sử dụng vị trí tương đối là tác động của nó (hoặc tác động của nó) đối với phần còn lại của thiết kế trang. Nó không chỉ hoạt động song song với các yếu tố tuyệt đối, mà còn hoạt động tốt với chuyển đổi được dịch để định vị các yếu tố ở vị trí hoàn hảo.

Nguồn: Elegant Themes

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer