Các thuộc tính trên cùng, dưới cùng, trái và phải được sử dụng với vị trí để đặt vị trí của một phần tử. Chúng chỉ ảnh hưởng đến các phần tử được định vị,

Bạn đang xem: css trên cùng, dưới cùng bên trái bên phải

top , Các thuộc tính , left right được sử dụng với position để đặt vị trí của một phần tử. Chúng chỉ ảnh hưởng đến các phần tử được định vị, là các phần tử có thuộc tính position được đặt thành bất kỳ thứ gì khác ngoài static . Ví dụ: tương đối , tuyệt đối , cố định hoặc cố định .

  div {
  & lt; đầu trang || dưới cùng || trái || phải & gt ;: & lt; length & gt; || & lt; phần trăm & gt; || tự động || thừa kế;
}  

Ví dụ: bạn có thể sử dụng nó để di chuyển một biểu tượng vào vị trí:

Nút

  .icon {
  chức vụ: thân nhân;
  đầu trang: 1px;
}  

Hoặc định vị một phần tử đặc biệt bên trong vùng chứa.

 . container {
  chức vụ: thân nhân;
}
Tiêu đề .container {
  vị trí: tuyệt đối;
  đầu: 0;
}  

Giá trị cho top , bottom , left right có thể là bất kỳ giá trị nào sau đây: < / p>

  • bất kỳ độ dài CSS hợp lệ nào
  • phần trăm chiều cao của phần tử chứa (cho top bottom ) hoặc chiều rộng (cho left right < / code>)
  • auto
  • kế thừa

Phần tử thường sẽ di chuyển ra khỏi một phía nhất định khi giá trị của nó là dương và về phía đó khi giá trị là âm. Trong ví dụ bên dưới, độ dài dương cho top di chuyển phần tử xuống (ra khỏi đầu) và độ dài âm cho top sẽ di chuyển phần tử lên trên (về phía trên cùng) :

Xem Bút
Hàng đầu: giá trị tích cực và tiêu cực
bởi Matsuko Friedland ( @ missmatsuko )
trên CodePen .

Vị trí

Vị trí của phần tử có giá trị cho top , bottom , left hoặc right phụ thuộc vào giá trị của nó cho vị trí . Hãy xem điều gì sẽ xảy ra khi chúng ta đặt cùng một giá trị cho top trên các phần tử có các giá trị khác nhau cho position .

static

Thuộc tính top không ảnh hưởng đến các phần tử không được định vị (các phần tử có position được đặt thành static ). Đây là cách các phần tử được định vị theo mặc định. Bạn có thể sử dụng position: static; như một phương pháp để hoàn tác tác động của top trên một phần tử.

tương đối

Khi top được đặt trên phần tử có position được đặt thành tương đối , phần tử sẽ di chuyển lên hoặc xuống so với vị trí ban đầu của nó trong tài liệu.

Xem Bút
Hàng đầu: tương đối
bởi Matsuko Friedland ( @ missmatsuko )
trên CodePen .

tuyệt đối

Khi top được đặt trên một phần tử có position được đặt thành tuyệt đối , phần tử sẽ di chuyển lên hoặc xuống liên quan đến vị trí gần nhất của nó tổ tiên (hoặc tài liệu, nếu không có tổ tiên định vị).

Trong bản trình diễn này, hộp màu hồng ở bên trái được định vị xuống 50px từ đầu trang vì nó không có phần tử tổ tiên được định vị. Hộp màu hồng ở bên phải được định vị xuống 50px từ trên cùng của hộp chính vì hộp chính có vị trí của tương đối .

Xem Bút
Hàng đầu: tuyệt đối
bởi Matsuko Friedland ( @ missmatsuko )
trên CodePen .

đã sửa

Khi top được đặt trên một phần tử có position được đặt thành fixed , phần tử sẽ di chuyển lên hoặc xuống liên quan đến chế độ xem của trình duyệt .

Xem Bút
Đầu trang: đã sửa
bởi CSS-Tricks ( @ css-trick )
trên CodePen .

Thoạt nhìn, có vẻ như không có sự khác biệt giữa tuyệt đối cố định . Có thể thấy sự khác biệt khi bạn so sánh chúng trên một trang có đủ nội dung để cuộn. Khi bạn cuộn xuống, phần tử vị trí cố định luôn ở trong chế độ xem, trong khi phần tử vị trí tuyệt đối sẽ cuộn ra.

Xem Bút
Cuộn: cố định so với tuyệt đối
bằng CSS-Tricks ( @ css-trick )
trên CodePen .

dính

Khi top được đặt trên một phần tử có position được đặt thành stick , phần tử sẽ di chuyển lên hoặc xuống liên quan đến tổ tiên gần nhất với hộp cuộn (hoặc chế độ xem, nếu không có tổ tiên nào có hộp cuộn), giới hạn trong giới hạn của phần tử chứa nó.

Việc đặt top trên phần tử được định vị stick không có tác dụng gì trừ khi vùng chứa của nó cao hơn và bạn có đủ nội dung để cuộn. Giống như với fixed , phần tử sẽ ở trong chế độ xem khi bạn cuộn. Không giống như fixed , phần tử sẽ nằm ngoài tầm nhìn khi nó đến các cạnh của phần tử chứa nó.

Xem Bút
Cuộn: cố định so với cố định
bằng CSS-Tricks ( @ css-trick )
trên CodePen .

Gotchas

Đặt các mặt đối diện

Bạn có thể đặt một giá trị cho từng top , bottom , left right trên một giá trị yếu tố. Khi bạn đặt giá trị cho các cạnh đối diện ( top bottom hoặc left right ), kết quả có thể không luôn là những gì bạn mong đợi.

Trong hầu hết các trường hợp, bottom bị bỏ qua nếu top đã được đặt và right bị bỏ qua nếu left đã được thiết lập. Khi hướng được đặt thành rtl (từ phải sang trái), left bị bỏ qua thay vì phải . Để mỗi giá trị có tác dụng, phần tử phải có position được đặt thành tuyệt đối hoặc cố định height đặt thành auto (mặc định).

Trong ví dụ này, chúng tôi đặt top , bottom , left right thành `20px`, và mong đợi mỗi cạnh của hộp bên trong cách các cạnh của hộp bên ngoài 20px:

Xem Bút
Đặt trên, dưới, trái và phải
bằng CSS-Tricks ( @ css-trick )
trên CodePen .

Khi cố định không liên quan đến chế độ xem

Các phần tử có vị trí được đặt thành cố định không phải lúc nào cũng được định vị liên quan đến chế độ xem. Nó sẽ được định vị so với tổ tiên gần nhất của nó với thuộc tính biến đổi , phối cảnh hoặc filter được đặt thành bất kỳ thứ gì khác ngoài none , nếu có.

Thêm hoặc xóa khoảng trắng

Nếu bạn đã định vị một phần tử và nhận thấy rằng hiện có một khoảng trống hoặc không đủ không gian như bạn mong đợi, điều đó có thể liên quan đến việc phần tử đó nằm trong hay ngoài luồng của tài liệu.

Khi một phần tử được đưa ra khỏi quy trình của tài liệu, điều đó có nghĩa là không gian mà phần tử đó chiếm trên trang ban đầu sẽ biến mất. Đây là trường hợp khi một phần tử được định vị tuyệt đối hoặc cố định . Trong ví dụ này, hộp chứa phần tử được định vị tuyệt đối đã bị thu gọn vì phần tử được định vị tuyệt đối đã bị xóa khỏi luồng của tài liệu:

Xem Bút
Quy trình tài liệu
của Matsuko Friedland ( @ missmatsuko )
trên CodePen .

Hỗ trợ Trình duyệt

Bạn có thể xem qua , nhưng không có mối lo ngại về trình duyệt chéo nào đối với thuộc tính top . Tùy ý sử dụng.


Xem thêm những thông tin liên quan đến chủ đề css trên cùng bên trái bên phải

Giọng ải giọng ai 5| Tập 9: Cờ Cá Ngựa quẩy tưng bừng sân khấu với ca khúc Có Không Giữ Mất Đừng Tìm

  • Tác giả: DIEN QUAN Entertainment / Giải Trí
  • Ngày đăng: 2020-08-23
  • Đánh giá: 4 ⭐ ( 5120 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: giongaigiongai giongaigiongaimua5 giongaigiongai5
    Giọng ải giọng ai 5| Tập 9: Cờ Cá Ngựa quẩy tưng bừng sân khấu với ca khúc Có Không Giữ Mất Đừng Tìm
    ---------
    📺 Đón xem Giọng ẢI Giọng Ai Mùa 5, phát sóng lúc 19:00 Chủ Nhật hàng tuần trên HTV7 và phát lại trên YouTube Dien Quan Entertainment lúc 20:00
    📺 Xem lại tất cả TẬP FULL tại đây: https://bit.ly/31ErXVz

    💝 Cảm ơn Samsung Galaxy A21s, nhà tài trợ độc quyền đã đồng hành cùng chương trình SamsungVietnamFB

    💝 Follow và cập nhật thông tin mới nhất từ chương trình qua fanpage: https://www.facebook.com/giongaigiongai/
    dienquan colorentertainment htv7 Samsung GalaxyA21s CameraMacroChụpCậnCảnh ĐộtPháTrongTầmTay
    -------------
    📣 Cùng Subscribe các kênh Youtube của Điền Quân để xem những bộ phim cùng chương trình hấp dẫn khác:
    ► Dien Quan Entertainment: https://www.youtube.com/dienquanentertainment
    ►Dien Quan Comedy / Hài: https://www.youtube.com/dienquancomedy
    ►Dien Quan Films :https://www.youtube.com/dienquanfilm
    ►Dien Quan Kids: https://www.youtube.com/dienquankids
    ►Thiên Đường Ẩm Thực : https://www.youtube.com/dienquanfoodandlifestyle

CSS Alignment - Tự học CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 5322 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay bạn sẽ được học về các phương pháp căn chỉnh CSS phổ biến và 3 giải pháp clear float mà đã làm bao nhiêu lập trình viên đau đầu.

Hướng dẫn tạo right aligned menu và centered menu bằng CSS

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 5818 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Menu tab là một phần quan trọng và không thể thiếu trong mọi trang web. Thiết kế một menu đẹp và hiện đại sẽ giúp cho trang web thiếp cận được nhiều người.

Thuộc tính Padding trong CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 5 ⭐ ( 8078 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính Padding trong CSS w3seo tìm hiểu về thuộc tính padding trong CSS, hướng dẫn sử dụng padding trong css

Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 6463 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

CSS: Làm cách nào để đặt hai phần tử chồng lên nhau mà không cần chỉ định chiều cao?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8723 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Trước hết, bạn thực sự nên bao gồm vị trí trên các yếu tố được định…

Thuộc tính left

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 2895 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính left được dùng để định vị trí bên trái (left) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trái ngoài cùng của thành phần bao ngoài - Học web chuẩn

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  javaScript Push Element, Array Into Array Ví dụ - mảng đẩy javascript trong mảng

By ads_php