Định vị CSS là gì

Hiểu về vị trí tính toán trong CSS có thể là một trong những trải nghiệm khó khăn cho chúng ta khi bắt đầu. Nó thuộc tính xác định loại của phương pháp định vị trí cho thành phần

Constructor

tag {
    position: giá trị;
}

Có 2 loại định vị

định vị tĩnh và định vị tương đối

Static positoning only has a value.

    .tag {
        position: static;
    }

2. Nó là mặc định nên ít khi thấy nó được khai báo

Định vị tương đối bao gồm các giá trị.

    .tag {
        position: static;
    }

3. Các giá trị này tương tác với nhau và cho phép bạn di chuyển các yếu tố xung quanh theo những cách thú vị

định vị tĩnh

Mặc dù không thường xuyên nhưng thỉnh thoảng bạn sẽ thấy nó được khai báo

    .tag {
        position: static;
    }

Vị trí tĩnh là vị trí mặc định của mọi thành phần, bất kể bạn khai báo hay không. Tất cả các thành phần sẽ nằm theo thứ tự trong tài liệu

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

Các giá trị của nó là.

    .tag {
        position: static;
    }

4, Nó cho phép các thành phần được xác định vị trí của cuộc tấn công chính với các thuộc tính của tôi, trình duyệt

Tất cả các loại định vị tương đối đều có tác dụng như sau. . Được chuyển thông qua việc sử dụng thuộc tính offset, đó là. trên, trái, phải, dưới. . Chúng ta tạo ra quan hệ tương đối, nó cho phép thành phần con với

    .tag {
        position: static;
    }

5được xác định vị trí tương đối với vị trí của yếu tố này

Vị trí tương đối

Constructor

    tag {
        positon: relative;
    }

Elementary.

    .tag {
        position: static;
    }

6 của một phần tử liên quan đến vị trí hiện tại của nó mà không thay đổi cục diện xung quanh vị trí đó

Để rõ ràng, khi bạn sử dụng một phần bù để chuyển trực tiếp quan một phần tử có

    .tag {
        position: static;
    }

6, không gian mà nó chiếm trong tài liệu sẽ không chuyển

Please view ví dụ

    .ourBox {
          position: relative;
          top: 20px;
          left: 20px;
    }

Ở đây chúng ta có thể thấy phần trên của phần tử được bù 20 pixel, liên quan đến vị trí của phần tử trong luồng thông thường. Điều tương tự đang được áp dụng cho phía bên trái

Lưu ý rằng vị trí của các hộp ở hai bên không thay đổi. Hãy nhớ rằng, khi bạn bù đắp một vị trí phần tử với

    .tag {
        position: static;
    }

6, không gian nó chiếm không di chuyển, vì vậy nó sẽ giành được ảnh hưởng đến mọi thứ xung quanh nó

Nó giống như chiếc hộp của chúng tôi có một tinh thần tự do và có thể đi bất cứ nơi nào nó muốn, nhưng luôn luôn liên quan đến nơi ban đầu

vị trí tuyệt đối

    .tag {
        position: static;
    }

5 của một phần tử liên quan đến vị trí của bố mẹ và thay đổi bố cục xung quanh vị trí đó

Please view ví dụ sau

    .ourBoxesParent {
          position: relative;
    }
    .ourBox {
          position: absolute;
          top: 0;
          left: 0;
    }

Chúng ta đã thêm một bộ vị trí của hộp

    .tag {
        position: static;
    }

6. Chúng ta cũng đã thay đổi bõ của chúng ta để được

    .tag {
        position: static;
    }

5. Bây giờ 2 ô sẽ xuất hiện cạnh nhau

Vị trí cố định

    tag {
        positon: relative;
    }

2 giống như

    tag {
        positon: relative;
    }

3 nhưng có một điểm chính khác nhau. Phần tử được định vị tương ứng với chế độ xem. Điều này có nghĩa là ngay cả khi trang được cuộn, thì nó sẽ luôn ở trên màn hình ngay tại vị trí chuẩn đó và lật ngược lên trên các phần tử bên dưới

Việc sắp xếp vị trí các phần tử của trang web không dễ dàng như mọi người thường nghĩ, mọi thứ có thể trở nên phức tạp hơn rất nhiều khi trang web của bạn có nhiều phần tử khác nhau. Do đó, điều cần thiết là phải biết cách sử dụng CSS để sắp xếp vị trí các phần tử, từ đó sẽ tiết kiệm thời gian mã của chúng ta hơn

Có nhiều cách / phương pháp khác nhau để sắp xếp các phần tử và dàn trang web. Sử dụng Bootstrap là một cách rất tốt và nhanh gọn, tuy nhiên không phải tất cả các dự án đều sử dụng Bootstrap. Trong bài viết này, mình sẽ giải thích một số cách sắp xếp các phần tử với CSS thuần túy. thuộc tính

top | right | bottom | left | z-index

8. Ngoài ra, chúng ta có thể sử dụng thuộc tính Display với các giá trị như flex, grid, inline-block. hôm nay mình sẽ chỉ nói về thuộc tính

top | right | bottom | left | z-index

8 nhé

CSS Position & các thuộc tính Helper

Có 5 giá trị chính của

top | right | bottom | left | z-index

8

position: static | relative | absolute | fixed | sticky

and các thuộc tính có nhiệm vụ căn cứ để điều chỉnh vị trí của phần tử (mình gọi chúng là các thuộc tính

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

1)

top | right | bottom | left | z-index

Ghi chú. các thuộc tính Người trợ giúp không thể hoạt động nếu như không khai báo thuộc tính

top | right | bottom | left | z-index

8, hoặc với

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

3

z-index là gì?

Chúng ta có chiều cao (height) và chiều rộng (chiều rộng) (x,y) là 2 chiều của phần tử. Z chính là chiều thứ 3 của phần tử. Một phần tử hiện được đảo ngược trên một phần tử khác có nghĩa là giá trị

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

4 của nó đã được tăng lên.

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

4 cũng không hoạt động với

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

3 hoặc khi không có thuộc tính

top | right | bottom | left | z-index

8

Phần tử càng ở bên thì

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

4 của nó càng cao

Bây giờ mình sẽ nói đến các giá trị của thuộc tính

top | right | bottom | left | z-index

8

1. tĩnh

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

3 is default value of

top | right | bottom | left | z-index

8. Dù chúng ta có khai báo chúng hay không thì các phần tử sẽ được sắp xếp vị trí một cách bình thường trên trang web

Chúng ta có một đoạn HTML sau

<body>
   <div class="box-orange">div>
   <div class="box-blue">div>
body>

Sau đó chúng ta tạo CSS và định nghĩa

top | right | bottom | left | z-index

8 cho chúng ta

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

Chúng ta có thể thấy cùng một kết quả trong cả 2 trường hợp

2. Liên quan đến

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

3. Vị trí mới của một phần tử tương quan/liên hệ tới vị trí mặc định của nó

Với

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

3 và các giá trị khác bên ngoài

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

5, chúng ta có thể dễ dàng thay đổi vị trí của chúng. Nhưng chỉ khai báo

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

3 thôi chưa đủ, chúng ta cần đến việc điều chỉnh vị trí của phần tử bằng các thuộc tính

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

7

Hãy chuyển hình vuông màu cam sang bên cạnh hình vuông màu xanh nhé

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

Hình dạng ô màu cam đã được dịch 100px xuống phía dưới bên phải so với vị trí bình thường của nó

Ghi chú. Sử dụng

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

3 cho một phần tử thì sẽ không ảnh hưởng đến vị trí của các phần tử khác

3. tuyệt đối

Với

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

3, một phần tử được dịch chuyển đến một vị trí mới dựa trên vị trí bình thường của chính nó. Tuy nhiên,

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

0 sẽ chuyển vị trí của nó tương ứng với thẻ cha của nó

Một element được khai báo với thuộc tính

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

0 sẽ được loại bỏ khỏi luồng document (document flow). Vị trí mặc định của element sẽ là điểm bắt đầu (top-left) của element cha. Nếu nó không có bất cứ thẻ cha nào thì thẻ document sẽ là cha của nó.

Vì

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

0 đã bị loại khỏi luồng tài liệu, các phần tử khác do phần tử được định nghĩa là

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

0 coi như đã bị xóa khỏi trang web

Mình sẽ thêm 1 div

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

4 làm thẻ cha trong ví dụ sau

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

And change a little about

top | right | bottom | left | z-index

8 of them

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
}

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

0 đưa phần tử về vị trí top-left của cha nó

As a shape as a blue color frame was being lost. Nhưng sự thật là nó đã coi như hình tam giác màu cam đã bị xóa, và nó được đưa lên vị trí ban đầu của hình tam giác màu cam

Để chứng minh cho điều này, mình sẽ dịch khung hình cam đi 5px

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}

Bây giờ chúng ta đã nhìn thấy hình vuông xanh

Vị trí của một phần tử

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

7 sẽ tương ứng với vị trí của cha nó nếu thẻ cha được khai báo

top | right | bottom | left | z-index

8 khác bên ngoài

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

5

.container {
  position: relative;
  background: lightgray;
}
.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // dịch 5px so với cạnh phải của thẻ cha
}

4. đã sửa

Giống như

.box-orange {
  position: relative;  // chúng ta có thể di chuyển được element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // dịch chuyển xuống 100px từ vị trí ban đầu của nó 
  left: 100px;        // dịch chuyển sang phải 100px
}

0, các yếu tố được khai báo với

top | right | bottom | left | z-index

8 này sẽ bị loại bỏ khỏi luồng tài liệu. Only other is

• Vị trí của chúng chỉ tương ứng với thẻ

  <body>
     <div class="container">
         <div class="box-orange">div>
         <div class="box-blue">div>
     div>
  body>
  

  2
• Chúng không bị ảnh hưởng khi cuộn

Ở ví dụ tiếp theo, mình sẽ thay đổi

top | right | bottom | left | z-index

8 của hình vuông cam thành

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

4, và sẽ cách lề phải 5px so với thẻ

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

2, không phải thẻ cha của nó (thùng chứa)

Như chúng ta thấy, việc cuộn trang web không thay đổi vị trí của phần tử

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

4. Nó đã được xác định vị trí so với cửa sổ duyệt. Và để xác định vị trí của nó thì các bạn cũng phải kết hợp với các thuộc tính top, right, bottom, left như 2 thuộc tính phía trên

5. dính

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

7 có thể hiểu đơn giản là sự kết hợp của

.box-orange {          // Không khai báo position
  background: orange;
  height: 100px;
  width: 100px;       
}
.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Khai báo "static"
}

3 và

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

9

Nó na ná

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

4 nhưng khi các bạn cuộn đến vị trí của nó sẽ giống như màn hình như

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

4 và khi các bạn cuộn lên khỏi nó thì nó sẽ quay lại vị trí ban đầu dưới định dạng

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
}

2

Nghe hơi khó hiểu phải không, cùng xem ví dụ nhé

Ghi chú.

<body>
   <div class="container">
       <div class="box-orange">div>
       <div class="box-blue">div>
   div>
body>

7 không được sử dụng trên IE và một số phiên bản đầu tiên của Edge nên mình không khuyến khích sử dụng nhé

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

Thuộc tính Vị trí tuyệt đối . position: absolute trong CSS có tác dụng giúp định vị trí tuyệt đối cho thành . là theo cửa sổ trình duyệt.

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

Tương đối . liên quan đến. Vị trí mới của một phần tử tương quan/ liên hệ tới vị trí mặc định của nó . Với vị trí. tương đối và các giá trị khác ngoài tĩnh, chúng ta có thể dễ dàng thay đổi vị trí của chúng.

Đâu là thuộc tính position trong CSS?

5 giá trị thuộc tính cơ bản của Vị trí trong CSS Thông thường chúng ta sẽ có 4 thuộc tính chính bao gồm: static, relative, fixed và absolute. Ngoài ra bạn sẽ thấy thêm các thuộc tính như. dính và 2 thuộc tính khá thú vị khác là ban đầu, kế thừa.

Giá trị mặc định của thuộc tính position là gì?

5 giá trị tuyệt đối Thuộc tính Vị trí . Được xem là giá trị được hiển thị Vị trí trong CSS một cách mặc định. Các thành phần sẽ nằm đúng theo thứ tự của văn bản. - Liên quan đến. Hiểu được là định vị trí tuyệt đối cho các thành phần. Giá trị này không gây ảnh hưởng đến vị trí ban đầu hay các thành phần khác.