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

định vị tĩnh

Mọ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ử đó

Di chuyển phần tử sang phải css

Định vị tương đối

Mộ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

Di chuyển phần tử sang phải css

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ử

  1. Nó giới thiệu việc sử dụng chỉ mục z trên phần tử đó. Điều này không hoạt động với các yếu tố tĩnh. Ngay cả khi bạn không đặt giá trị chỉ mục z, phần tử này sẽ vẫn xuất hiện trên bất kỳ phần tử tĩnh nào khác mà nó chồng lên. Chỉ mục Z có sẵn cho bất kỳ phần tử nào không được đặt thành tĩnh.  
  2. Nó giới hạn các phần tử con được định vị tuyệt đối. Bất kỳ phần tử nào là con của phần tử tương đối hoặc bất kỳ vị trí nào không phải là tĩnh, đều có thể được định vị tuyệt đối trong 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.  

Di chuyển phần tử sang phải css

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ố định

Cá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

Di chuyển phần tử sang phải css

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ính

Cá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

Di chuyển phần tử sang phải css

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ị
  • chỉ số tương đối
  • Trường giá trị chỉ mục Z

đ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

  • Trên cùng bên trái. đặt các giá trị sau. đứng đầu. 0px - trái. 0px
  • Trên cùng bên phải. đặt các giá trị sau. đứng đầu. 0px - phải. 0px
  • Dưới cùng bên trái. đặt các giá trị sau. đáy. 0px - trái. 0px
  • Góc phải ở phía dưới. đặt các giá trị sau. đáy. 0px - phải. 0px
  • Bên trái. đặt các giá trị sau. đứng đầu. 0px - trái. 0px - dưới cùng. 0px
  • Phải. đặt các giá trị sau. đứng đầu. 0px - phải. 0px - dưới cùng. 0px
  • Đứng đầu. đặt các giá trị sau. đứng đầu. 0px - trái. 0px - phải. 0px
  • Đáy. đặt các giá trị sau. đáy. 0px - trái. 0px - phải. 0px
  • Đầy. đặt các giá trị sau. đứng đầu. 0px - dưới cùng. 0px - trái. 0px - phải. 0px (bao gồm toàn bộ phần gốc hoặc nội dung tương đối)

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

  • Đứng đầu. tăng nó để đẩy phần tử từ trên xuống
  • Bên trái. tăng nó để đẩy phần tử ra khỏi bên trái và di chuyển nó sang bên phải
  • Phải. tăng nó để đẩy phần tử ra khỏi bên phải và di chuyển nó sang bên trái
  • Đáy. tăng nó để đẩy phần tử lên từ dưới lên

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 đối

Chỉ 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

Di chuyển phần tử sang phải css

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ố Z

Chỉ 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ử

Di chuyển phần tử sang phải css

Chỉ mục Z trên các phần tử lồng nhau

Khi 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

Di chuyển phần tử sang phải css

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

Di chuyển phần tử sang phải css

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ổi

Khô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ái

Di 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ải

Di 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óa

Clear 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

Di chuyển phần tử sang phải css

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ái

Clear 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

Di chuyển phần tử sang phải css

Xóa bên phải

Clear 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

Di chuyển phần tử sang phải css

Xóa cả hai

Xó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