Khi bạn muốn thiết kế các bố cục phức tạp, bạn sẽ cần thay đổi luồng tài liệu điển hình và ghi đè các kiểu trình duyệt mặc định. Bạn phải kiểm soát cách các phần tử hoạt động và được định vị trên trang. Ví dụ: bạn có thể muốn xếp chồng các phần tử bên cạnh nhau hoặc trên cùng của

Bạn đang xem: vị trí tuyệt đối làm gì

Khi bạn muốn thiết kế phức tạp bố cục, bạn sẽ cần thay đổi luồng tài liệu điển hình và ghi đè các kiểu trình duyệt mặc định.

Bạn phải kiểm soát cách các phần tử hoạt động và vị trí trên trang.

Ví dụ: bạn có thể muốn xếp chồng các phần tử bên cạnh nhau hoặc chồng lên nhau theo một cách cụ thể hoặc làm cho tiêu đề “dính” vào đầu trang và không di chuyển khi bạn cuộn lên và xuống trang .

Để thực hiện những điều trên và hơn thế nữa, bạn sẽ sử dụng thuộc tính position của CSS.

Thuộc tính này nhận năm giá trị: static , relative , tuyệt đối , fixed dính .

Trong bài viết này, chúng tôi sẽ tập trung vào các giá trị tương đối tuyệt đối .

Chúng ta sẽ thấy tổng quan về cách chúng hoạt động, sự khác biệt của chúng với nhau và cách chúng được sử dụng tốt nhất cùng với nhau để có hiệu quả tối đa.

Hãy bắt đầu!

Một công cụ hữu ích trong quy trình phát triển web giao diện người dùng của bạn là Công cụ dành cho nhà phát triển của Chrome.

Trong số nhiều thứ, bạn có khả năng xem mã HTML / CSS / JavaScript của bất kỳ trang web nào để hiểu cách hoạt động của các kiểu khác nhau.

Để xem vị trí của một phần tử trên trang web trên máy Mac, hãy nhấn Control và nhấp cùng lúc khi vào phần tử mong muốn. Trên máy tính của Window, nhấp chuột phải vào phần tử bạn muốn chọn.

Sau đó, một menu sẽ xuất hiện và từ đó chọn Kiểm tra .

Công cụ dành cho nhà phát triển Chrome sẽ mở ra.

Chọn tab Computed và từ đó cuộn xuống phần tử position hoặc trong hộp tìm kiếm filter , nhập vị trí .

Vị trí mặc định của các phần tử HTML trong CSS là gì?

Theo mặc định, thuộc tính position cho tất cả các phần tử HTML trong CSS được đặt thành static . Điều này có nghĩa là nếu bạn không chỉ định bất kỳ giá trị position nào khác hoặc nếu thuộc tính position không được khai báo rõ ràng, nó sẽ là static .

Về mặt trực quan, tất cả các phần tử tuân theo thứ tự của mã HTML và theo cách đó, luồng tài liệu điển hình được tạo.

Các phần tử xuất hiện lần lượt – ngay bên dưới phần tử khác, theo thứ tự của mã HMTL.

Các phần tử khối như & lt; div & gt; được xếp chồng lên nhau như sau:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
  & lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; link rel = "stylesheet" href = "style.css" & gt;
    & lt; title & gt; Định vị CSS & lt; / title & gt;
  & lt; / head & gt;
  & lt; body & gt;
    & lt; div class = "cha" & gt;
      & lt; div class = "con một" & gt; Một & lt; / div & gt;
      & lt; div class = "con hai" & gt; Hai & lt; / div & gt;
      & lt; div class = "con ba" & gt; ba & lt; / div & gt;
      & lt; div class = "con bốn" & gt; Bốn & lt; / div & gt;
    & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

 
  body {
  margin: 100px tự động;
}

.cha mẹ {
  chiều rộng: 500px;
  border: 1px màu đỏ đặc;
  margin: tự động;
  text-align: center;
}

.đứa trẻ {
  bán kính biên giới: 10%;
  chiều rộng: 100px;
  chiều cao: 100px;
  lề: 20px;
}

.một {
  background-color: bột màu;
}

.hai {
  background-color: màu xanh lam;
}

.số ba {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

 

Xem Thêm  Kích cỡ phông chữ CSS: em so với px so với pt so với phần trăm / Kyle Schaeffer - px so với tỷ lệ phần trăm css

Thuộc tính position không được khai báo trong đoạn mã trên và do đó nó hoàn nguyên về vị trí position: static mặc định. Nó tuân theo thứ tự của mã HTML.

Nội dung nào đến trước trong HTML được hiển thị trước và mỗi phần tử theo sau, tạo ra luồng tài liệu như tôi đã mô tả ở trên.

Trong mã của chúng tôi ở đây, div có văn bản “Một” được viết đầu tiên nên nó được hiển thị đầu tiên trên trang. Ngay bên dưới hộp đó, hộp có văn bản “Hai” được hiển thị, vì hộp này cũng xuất hiện tiếp theo trong HTML, v.v.

Vị trí mặc định này không để lại bất kỳ khoảng trống nào cho sự linh hoạt hoặc di chuyển các phần tử xung quanh.

Điều gì sẽ xảy ra nếu bạn muốn di chuyển hình vuông đầu tiên một chút về phía bên trái của trang – bạn sẽ làm điều đó như thế nào?

Có các thuộc tính bù đắp để làm như vậy, như top , bottom, phải trái .

Nhưng nếu bạn cố gắng áp dụng chúng trong khi hình vuông có vị trí tĩnh mặc định này được áp dụng cho nó, thì các thuộc tính này sẽ không có tác dụng gì và hình vuông sẽ không di chuyển.

Các thuộc tính này không ảnh hưởng đến position: static .

Vị trí tương đối trong CSS là gì?

position: relative hoạt động giống như position: static; , nhưng nó cho phép bạn thay đổi vị trí của phần tử.

Nhưng chỉ viết quy tắc CSS này một mình sẽ không thay đổi bất cứ điều gì.

Để sửa đổi vị trí, bạn sẽ cần áp dụng mã top , bottom , right left các thuộc tính được đề cập trước đó và theo cách đó chỉ định vị trí và số lượng bạn muốn di chuyển phần tử.

Các khoảng lệch top , bottom , right left đẩy thẻ ra khỏi vị trí được chỉ định, hoạt động ngược lại.

top trên thực tế di chuyển phần tử xuống cuối vùng chứa mẹ của phần tử. bottom đẩy phần tử lên đầu vùng chứa mẹ của phần tử, v.v.

Bây giờ, bạn có thể di chuyển hình vuông đầu tiên sang bên trái bằng cách cập nhật CSS như sau:

 . một {
  background-color: bột màu;
  chức vụ: thân nhân;
  phải: 50px;
}

 

Tại đây, hình vuông đã di chuyển 50px từ bên trái của vị trí được cho là theo mặc định.

position: relative; thay đổi vị trí của phần tử so với phần tử mẹ và liên quan đến chính nó và vị trí của nó thường nằm trong luồng tài liệu thông thường của trang. Điều này có nghĩa là nó liên quan đến vị trí ban đầu của nó trong phần tử mẹ.

Nó di chuyển thẻ dựa trên vị trí hiện tại của nó, so với vị trí thông thường và so với các thẻ xung quanh mà không ảnh hưởng đến bố cục của chúng.

Sử dụng các hiệu số này và position: relative , bạn cũng có thể thay đổi thứ tự các phần tử xuất hiện trên trang.

Hình vuông thứ hai có thể xuất hiện trên đầu hình vuông đầu tiên:

 . một {
  background-color: bột màu;
  chức vụ: thân nhân;
  đầu trang: 150px;
}

.hai {
  background-color: màu xanh lam;
  chức vụ: thân nhân;
  đáy: 120px;
}

 

Về mặt trực quan, thứ tự hiện đã được đảo ngược, trong khi mã HTML vẫn giống hệt nhau.

Tóm lại, các phần tử được định vị tương đối có thể di chuyển xung quanh trong khi vẫn nằm trong luồng tài liệu thông thường.

Chúng cũng không ảnh hưởng đến bố cục của các yếu tố xung quanh.

Vị trí tuyệt đối trong CSS là gì?

Nếu bạn cập nhật quy tắc CSS cho hình vuông đầu tiên thành quy tắc sau:

 . một {
  background-color: bột màu;
  vị trí: tuyệt đối;
}

 

Bạn sẽ nhận được kết quả này:

Đây là hành vi không mong muốn. Hình vuông thứ hai đã hoàn toàn biến mất.

Nếu bạn cũng thêm một số thuộc tính bù trừ như thế này:

 . một {
  background-color: bột màu;
  vị trí: tuyệt đối;
  đầu trang: 50px;
  trái: 0;
}

 

Giờ thì hình vuông đã hoàn toàn bị bỏ rơi.

Các phần tử có vị trí tuyệt đối hoàn toàn bị loại ra khỏi quy trình thông thường của trang web.

Chúng không được định vị dựa trên vị trí thông thường của chúng trong luồng tài liệu, mà dựa trên vị trí của tổ tiên của chúng.

Trong ví dụ trên, hình vuông được định vị tuyệt đối nằm bên trong hình vuông mẹ được định vị tĩnh.

Điều này có nghĩa là nó sẽ được định vị so với toàn bộ trang, có nghĩa là so với phần tử & lt; html & gt; - phần tử gốc của trang.

Do đó, tọa độ, top: 50px; left: 0; , dựa trên toàn bộ trang.

Nếu bạn muốn các tọa độ được áp dụng cho phần tử mẹ của nó, bạn cần định vị tương đối phần tử mẹ bằng cách cập nhật .parent trong khi giữ nguyên .one : < / p>

 . parent {
  chiều rộng: 500px;
  border: 1px màu đỏ đặc;
  margin: tự động;
  text-align: center;
  chức vụ: thân nhân;
}

.một {
  background-color: bột màu;
  vị trí: tuyệt đối;
  đầu trang: 50px;
  trái: 0;
}

 

Đoạn mã này tạo ra kết quả bên dưới:

Vị trí tuyệt đối đưa các phần tử ra khỏi dòng tài liệu thông thường đồng thời ảnh hưởng đến bố cục của các phần tử khác trên trang.

Kết luận

Hy vọng rằng bây giờ bạn đã hiểu rõ hơn về cách thức hoạt động của định vị tương đối và tuyệt đối.

Nếu muốn tìm hiểu thêm về HTML và CSS, bạn có thể lưu và làm việc thông qua danh sách phát này trên kênh YouTube của freeCodeCamp.

Nó bao gồm các video để giúp bạn bắt đầu lại từ đầu và sẽ giúp bạn nắm bắt tốt các nguyên tắc cơ bản.

freeCodeCamp cũng cung cấp một dự án miễn phí và tương tác dựa trên Giấy chứng nhận thiết kế web đáp ứng , đây là một nơi tuyệt vời để bắt đầu hành trình phát triển web giao diện người dùng của bạn.

Cảm ơn bạn đã đọc và chúc bạn học vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề vị trí tuyệt đối làm gì

CÓ 10 ĐIỀU TUYỆT ĐỐI KHÔNG NÊN LÀM - Người Trí Nhất Định Phải Nhớ. Chùa Pháp Tạng Thích Trí Huệ

  • Tác giả: Chùa Pháp Tạng
  • Ngày đăng: 2022-05-22
  • Đánh giá: 4 ⭐ ( 1795 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 10 Điều Tuyệt Đối Không Nên Làm - Ai cũng phải nhớ, đặc biệt là người trí. Chùa Pháp Tạng - TT. Thích Trí Huệ
    ►𝐊ê𝐧𝐡 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 CHÙA PHÁP TẠNG CỦA THẦY THÍCH TRÍ HUỆ là nơi đă𝐧𝐠 𝐭ả𝐢 𝐯𝐢𝐝𝐞𝐨 𝐜𝐡í𝐧𝐡 𝐭𝐡ứ𝐜 về tất cả bài giảng và các bài thuốc của 𝐓𝐡ầ𝐲 𝐓𝐡í𝐜𝐡 Trí Huệ.
    Mời đại chúng bấm 𝗟𝗜𝗞𝗘 - 𝗦𝗨𝗕𝗦𝗖𝗥𝗜𝗕𝗘 - 𝗦𝗛𝗔𝗥𝗘 - 𝗖𝗢𝗠𝗠𝗘𝗡𝗧 để nhận video mới nhất.
    Quý Phật tử nhớ ấn "đăng ký" hoặc "subcribe" để theo dõi các bài pháp cũng như các bài thuốc trên trang chùa.
    Cùng chia sẻ video lên Facebook và Zalo để góp phần luân chuyển bánh xe pháp. Nam mô Bổn Sưu Thích Ca Mâu Ni Phật
    ►Vui lòng để lại đánh giá của quý vị nếu quý vị không ngại dành thời gian. Xin chân thành cảm ơn.
    ------------------------------------------------------------------------
    ►THÔNG TIN LIÊN HỆ:
    CHÙA PHÁP TẠNG C3/8 Lê Đình Chi, Xã Lê Minh Xuân, huyện Bình Chánh, TP.HCM
    LIÊN HỆ VĂN PHÒNG CHÙA PHÁP TẠNG: 028.3877.3877 - 0918.270.732

    ► Page: https://www.facebook.com/trihuehp
    ► Facebook : https://www.facebook.com/trihue.thich
    ► Page: https://www.facebook.com/facebookchuaphaptang
    ► Facebook : https://www.facebook.com/quytuthienphaptang
    ►Email: thichtrihue.news@gmail.com
    ..............................................................

    ✅Các bệnh về xương khớp:
    https://youtube.com/playlist?list=PL5OfbqsNMaTnBcmyUWfBrIYvwPOoDgHEc
    ✅Các bệnh về Bao tử: https://youtube.com/playlist?list=PL5OfbqsNMaTmqnY_ty7bzEHrvR5AVbzRD
    ✅Các bệnh về xoang mũi: https://youtube.com/playlist?list=PL5OfbqsNMaTmuORW1gXLOwVEEx2ZWJPSa
    ✅ Các bài thuốc Tiểu Đường:
    https://youtube.com/playlist?list=PL5OfbqsNMaTnQ1DJVKxjocx3jBgn5g-gR
    ✅ Các bài thuốc trị HP - viêm loét dạ dày:
    https://youtube.com/playlist?list=PL5OfbqsNMaTmqnY_ty7bzEHrvR5AVbzRD
    ✅ Các bài thuốc trị Sỏi Thận - Sỏi Mật
    https://youtube.com/playlist?list=PL5OfbqsNMaTkkPFFTWwjAa59hhDpE6ZBm
    ✅ Các bài thuốc trị Viêm Gan - U Xơ Gan
    https://youtube.com/playlist?list=PL5OfbqsNMaTn4MWzsHS_iEwPe5ONiw8PL
    ✅ Các bài thuốc về Viêm khớp - Thấp Khớp - Đau NHức Xương - Thoát vị - Thoái Hóa:
    https://youtube.com/playlist?list=PL5OfbqsNMaTnBcmyUWfBrIYvwPOoDgHEc

    ===================
    chuaphaptang​ thichtrihue thichtrihue2022 thichtrihue2021 phapthoaithichtrihue​ thuyetphapthichtrihue thuyetphap phatphap daophat

"Vị trí tuyệt đối" có nghĩa là gì?

  • Tác giả: vi.411answers.com
  • Đánh giá: 5 ⭐ ( 5325 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vị trí tuyệt đối của một địa điểm là tập hợp tọa độ chính xác của nó trên hành tinh, thường được biểu thị bằng độ kinh độ và vĩ độ. Trong địa lý, vị trí tuyệt đối tương phản với ...

Giá trị tuyệt đối trong Excel và hàm tính giá trị tuyệt đối

  • Tác giả: thuthuatoffice.net
  • Đánh giá: 4 ⭐ ( 3014 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn cần tính giá trị tuyệt đối trong Excel nhưng chưa biết cách? Các bạn có thể sử dụng hàm ABS để tính toán. Cùng ThuthuatOffice tìm hiểu nhé.

Vị trí tuyệt đối và vị trí tương đối – chủ đề bản đồ – THPT NGUYỄN HỮU CẦU

  • Tác giả: thpt-nguyenhuucau-tphcm.edu.vn
  • Đánh giá: 4 ⭐ ( 7936 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Vị trí CSS: Tương đối so với vị trí tuyệt đối

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 5936 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính vị trí CSS định nghĩa, như tên gọi, cách phần tử được định vị trên trang web. Nếu bạn muốn đọc về các thuộc tính phông chữ, các bài viết về kích thước phông chữ tương đối và các…

Đạo Hàm Trị Tuyệt Đối Của X Là Gì? Công Thức Tính Và Bài Tập

  • Tác giả: blog.marathon.edu.vn
  • Đánh giá: 4 ⭐ ( 2339 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tính đạo hàm chứa giá trị tuyệt đối như thế nào? Cùng Marathon tìm hiểu công thức tính đạo hàm trị tuyệt đối x cùng với ví dụ và bài tập liên quan.

Giá trị tuyệt đối là gì? Cách tính giá trị tuyệt đối của số hữu tỉ lớp 6, 7, 8

  • Tác giả: maynenkhikhongdau.net
  • Đánh giá: 3 ⭐ ( 7179 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giá trị tuyệt đối hay còn được gọi là mô-đun của một số thực tạm gọi là x và ký hiệu là |x|, còn được hiểu là khoảng cách của số đó đến số 0

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

By ads_php