Di chuyển phần tử sang phải css
Thuộc tính vị trí xác định vị trí của một phần tử trên trang. Khi bạn đặt vị trí của phần tử, bạn có thể điều chỉnh các thuộc tính trên cùng, dưới cùng, bên trái và bên phải Show định vị tĩnhMọi phần tử đều có vị trí tĩnh theo mặc định, vì vậy phần tử sẽ dính vào luồng tài liệu. Các phần tử có vị trí tĩnh xuất hiện theo thứ tự chúng được xếp chồng lên nhau. Nếu không thêm kiểu dáng, chúng sẽ không trùng lặp và các phần tử khác nhau sẽ không có các giá trị mặc định khác nhau. Lý do duy nhất để đặt một phần tử thành tĩnh là xóa định vị được áp dụng cho phần tử đó Định vị tương đốiMột phần tử được đặt thành tương đối được định vị so với vị trí bình thường của nó. Cài đặt tương đối không có các thuộc tính định vị khác được thêm vào (trên, trái, dưới hoặc phải) sẽ không bị ảnh hưởng. Điều này là do nó tương đối với chính nó như thể bạn để nó ở trạng thái tĩnh. Việc đặt các thuộc tính top, right, bottom và left của phần tử tương đối sẽ di chuyển phần tử đó ra khỏi vị trí bình thường. Nội dung khác sẽ không điều chỉnh để phù hợp với bất kỳ khoảng trống nào do phần tử để lại Một phần tử có vị trí tương đối có thể chồng lên các phần tử khác mà không ảnh hưởng đến vị trí của chúng hoặc làm gián đoạn luồng tài liệu thông thường Hai điều khác xảy ra khi bạn sử dụng vị trí tương đối trên một phần tử
Tìm hiểu thêm về cách áp dụng giá trị chỉ số z Định vị tuyệt đốiĐể xóa một phần tử khỏi luồng tài liệu thông thường, vị trí tuyệt đối là một tùy chọn tuyệt vời. Vị trí của một phần tử tuyệt đối không bị ảnh hưởng bởi các phần tử khác và không ảnh hưởng đến vị trí của các phần tử khác. Theo mặc định, vị trí của phần tử có liên quan đến phần tử cơ thể, nhưng bạn có thể định vị bất kỳ phần tử tuyệt đối nào bên trong một phần tử nếu cha mẹ đó được đặt thành bất kỳ thứ gì ngoại trừ tĩnh Sử dụng các thuộc tính định vị trên, trái, dưới và phải để đặt vị trí — các giá trị này sẽ liên quan đến phần tử cha tiếp theo với các cài đặt khác với cài đặt tĩnh định vị cố địnhCác phần tử cố định được định vị tương ứng với khung nhìn hoặc cửa sổ trình duyệt Khi bạn cuộn xuống trang, các phần tử cố định sẽ cố định ở vị trí của chúng. Cài đặt vị trí này thường được sử dụng cho điều hướng cố định định vị dínhCác phần tử cố định sẽ xen kẽ giữa vị trí tương đối và cố định dựa trên vị trí cuộn của người xem Phần tử dính có liên quan đến luồng tài liệu cho đến khi đạt đến vị trí cuộn xác định. Tại thời điểm đó, nó chuyển sang hành vi của một phần tử cố định trong cha mẹ trực tiếp của nó. Khi phần tử dính chạm vào dưới cùng của phần tử gốc, nó sẽ ngừng cuộn Bạn phải chỉ định ít nhất một giá trị vị trí cho phía trên, dưới, bên trái hoặc bên phải để định vị cố định hoạt động. Vị trí cố định có thể không hoạt động chính xác nếu bất kỳ phần tử gốc nào có chiều cao đã đặt hoặc phần tràn được đặt thành ẩn, cuộn hoặc tự động Có một số trình duyệt không hỗ trợ định vị cố định Kiểm soát vị trí và giá trịĐối với các thuộc tính vị trí tương đối, tuyệt đối, cố định và cố định, bạn có các điều khiển sau trong bảng Kiểu
điều khiển định vịĐối với các phần tử có vị trí tuyệt đối và cố định, bạn sẽ thấy các cài đặt trước cho phép bạn định vị phần tử tương ứng với phần tử được chỉ định trong chỉ báo tương đối Bạn có thể chọn bất kỳ vị trí đặt trước nào sau đây
Các điều khiển thủ công cho phép bạn ghi đè các giá trị đặt trước hoặc mặc định thành giá trị tự động cho mặt trên, mặt dưới, mặt trái và mặt phải. Bạn có thể thay đổi giá trị cho mỗi bên bằng cách kéo điều khiển hoặc nhấp vào nó và chọn giá trị đặt trước hoặc nhập giá trị tùy chỉnh
Việc thêm các giá trị âm cho bất kỳ giá trị nào trong số này sẽ di chuyển nó theo hướng ngược lại và có thể đẩy nó ra khỏi đường viền của phần tử gốc chỉ số tương đốiChỉ báo tương đối hiển thị cho bạn phần tử mà phần tử đã chọn của bạn được định vị so với Hãy nhớ rằng, một phần tử được đặt thành vị trí tương đối được định vị so với chính nó Một phần tử được đặt thành phần tử tuyệt đối được định vị so với phần tử cha. Theo mặc định, đây có thể là phần tử body. Nếu bạn muốn định vị hoàn toàn một phần tử trong một phần tử cha cụ thể, hãy thay đổi vị trí của tổ tiên đó thành bất kỳ thứ gì ngoại trừ tĩnh Một phần tử cố định được định vị so với nội dung trang và giữ nguyên vị trí ngay cả khi trang được cuộn Phần tử dính được định vị so với phần tử cha trực tiếp của nó. Trong một số trường hợp, đây sẽ là nội dung trang chỉ số ZChỉ số Z là vị trí của một phần tử trên trục z tưởng tượng kéo dài vào và ra khỏi màn hình máy tính của bạn. Theo mặc định, các phần tử có chỉ mục z tự động và các phần tử ở cuối trang xếp chồng lên trên các phần tử phía trên chúng, trong khi các phần tử ở bên phải xếp trên các phần tử ở bên trái. Các phần tử tĩnh luôn xếp chồng thấp hơn các phần tử được định vị với vị trí được đặt thành tương đối, tuyệt đối, cố định hoặc cố định Các phần tử được định vị có thể chồng lên các phần tử khác trong luồng tài liệu tự nhiên, do đó bạn có thể thay đổi giá trị chỉ mục Z của bất kỳ phần tử được định vị nào để thay đổi thứ tự xếp chồng mặc định của nó. Giá trị cao hơn xếp chồng lên giá trị thấp hơn. Giá trị chỉ mục Z có thể là bất kỳ số nguyên nào từ 0 đến 2147483647. Bạn cũng có thể sử dụng các giá trị âm, nhưng bạn có thể mất khả năng hiển thị phần tử vì phần tử của bạn sẽ được hiển thị bên dưới hầu hết các phần tử Chỉ mục Z trên các phần tử lồng nhauKhi chỉ mục z được đặt thành tự động, thứ tự ngăn xếp của phần tử bằng với thứ tự ngăn xếp của phần tử cha của nó. Các phần tử này có thể được xếp chồng lên nhau so với phần tử gốc nhưng vẫn nằm trong trục z của phần tử gốc so với các phần tử khác. Ví dụ: nếu phần tử A có chỉ số z cao hơn phần tử B, phần tử con của phần tử B không bao giờ có thể cao hơn phần tử A cho dù giá trị chỉ số z của phần tử B cao đến đâu. cài đặt nổiĐể ngắt văn bản xung quanh một phần tử, di chuyển phần tử sang trái hoặc phải. Để thả nổi một phần tử, hãy bật thuộc tính float left hoặc float right trong bảng Style Bạn có thể thả nổi một phần tử sang trái hoặc phải hoặc không thả phần tử nào để giữ phần tử ở vị trí tự nhiên trong luồng trang Nổi nhiều phần tử sẽ xếp chúng cạnh nhau. Kỹ thuật bố cục này được sử dụng trong nhiều thành phần Webflow gốc như cột, danh sách Bộ sưu tập và liên kết điều hướng. Bạn cũng có thể hoàn thành các tác vụ bố cục này với flexbox không nổiKhông có gì là cài đặt mặc định cho hầu hết các phần tử và sẽ định vị phần tử đó trong luồng tài liệu thông thường. Nếu một phần tử có cài đặt float kế thừa, chẳng hạn như từ một điểm dừng lớn hơn, bạn có thể khôi phục vị trí tự nhiên của nó trên trang bằng cách đặt float thành none Di chuyển sang tráiDi chuyển một phần tử sang trái sẽ định vị nó bên trái trong phần tử cha. Cài đặt này cũng sẽ xếp bất kỳ phần tử nào ở bên phải hoặc bên dưới, ngay bên cạnh phần tử trừ khi phần tử đó được áp dụng cài đặt rõ ràng Di chuyển sang phảiDi chuyển một phần tử sang bên phải sẽ định vị nó ở bên phải trong phần tử cha. Bất kỳ đoạn văn dài hoặc văn bản có định dạng nào ngay bên dưới phần tử nổi sẽ bao quanh phần tử đó trừ khi chúng có một bộ thuộc tính rõ ràng Xóa cài đặtĐặt rõ ràng trên một phần tử sẽ đảm bảo rằng nó sẽ không bao quanh phần tử nổi. Cài đặt này có thể được áp dụng cho bất kỳ phần tử nào được xếp chồng bên dưới phần tử nổi, nhưng không thể áp dụng cho chính phần tử nổi. Một phần tử có thuộc tính rõ ràng được đặt trên nó sẽ không di chuyển lên liền kề với số float như số float mong muốn, mà sẽ tự di chuyển xuống dưới số float không xóaClear none là cài đặt mặc định cho hầu hết các phần tử. Các phần tử được đặt thành không xóa sẽ xếp chồng lên nhau bên cạnh hoặc bao quanh bất kỳ phần tử nổi nào ngay phía trên nó trong luồng tài liệu Nếu một phần tử có cài đặt xóa kế thừa, chẳng hạn như từ điểm ngắt lớn hơn, bạn có thể xóa bất kỳ cài đặt xóa nào bằng cách đặt xóa thành không Xóa tráiClear left ngăn không cho một phần tử quấn quanh một phần tử nổi bên trái Xóa bên phảiClear right ngăn không cho một phần tử quấn quanh một phần tử nổi bên phải Xóa cả haiXóa cả hai ngăn phần tử bao quanh bất kỳ phần tử nổi nào, bất kể phần tử đó nổi sang trái hay phải |