Vị trí CSS

CSS giúp bạn định vị phần tử HTML của mình. Bạn có thể đặt bất kỳ phần tử HTML nào ở bất kỳ vị trí nào bạn thích. Bạn có thể chỉ định xem bạn muốn phần tử được định vị tương ứng với vị trí tự nhiên của nó trong trang hay tuyệt đối dựa trên phần tử cha của nó

Bây giờ, chúng ta sẽ thấy tất cả các thuộc tính liên quan đến định vị CSS với các ví dụ –

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

Định vị tương đối thay đổi vị trí của phần tử HTML so với vị trí thường xuất hiện. Vì vậy, "trái. 20" thêm 20 pixel vào vị trí TRÁI của phần tử

Bạn có thể sử dụng hai giá trị top và left cùng với thuộc tính vị trí để di chuyển phần tử HTML đến bất kỳ đâu trong tài liệu HTML

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 các thành phầ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

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2 của CSS

Thuộc tính này nhận năm giá trị.

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

3,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

4,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

0,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

1 và
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2

Trong bài viết này, chúng ta sẽ tập trung vào các giá trị

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

4 và
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

0

Chúng ta sẽ xem 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 kết hợp tốt nhất để đạt hiệu quả tối đa

Bắt đầu nào

Cách xem vị trí của các phần tử bằng Công cụ dành cho nhà phát triển Chrome

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ác phong cách khác nhau hoạt động như thế nào

Để xem vị trí của một phần tử trên trang web trên máy Mac, hãy nhấn

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

5 và nhấp đồng thời vào phần tử mong muốn. Trên máy 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

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

6

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

Chọn tab

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

7 và từ đó cuộn xuống phần tử
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2 hoặc trong hộp tìm kiếm
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

9, nhập vào
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2

Vị trí CSS

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

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2 cho tất cả các phần tử HTML trong CSS được đặt thành
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

3. Điều này có nghĩa là nếu bạn không chỉ định bất kỳ giá trị
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2 nào khác hoặc nếu thuộc tính
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2 không được khai báo rõ ràng thì nó sẽ là
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

3

Về mặt trực quan, tất cả các thành phần 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 ra

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

Các phần tử khối như

.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

6 được xếp chồng lên nhau như thế này



  
    
    
    
    
    CSS Positioning
  
  
    
One
Two
Three
Four
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

Vị trí CSS

Thuộc tính

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

2 không được khai báo trong đoạn mã trên và do đó nó trở lại mặc định là
.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

8. Nó tuân theo thứ tự của mã HTML

Bất cứ phần tử nào đến trước trong HTML đều được hiển thị trước và mỗi phần tử theo sau phần tử tiếp theo, 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 trước để nó được hiển thị đầu tiên trên trang. Ngay bên dưới hộp có dòng chữ "Hai" được hiển thị, vì nó cũng xuất hiện tiếp theo trong HTML, v.v.

Vị trí mặc định này không có chỗ cho sự linh hoạt hoặc di chuyển các yếu tố xung quanh

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

Có các thuộc tính offset để làm như vậy, như

.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

9,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

30,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

31 và
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

32

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ó, các thuộc tính này sẽ không làm gì và hình vuông sẽ không di chuyển

Những thuộc tính này không ảnh hưởng đến

.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

8

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

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

34 hoạt động giống như
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

35, 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 sẽ không thay đổi bất cứ điều gì

Để sửa đổi vị trí, bạn sẽ cần áp dụng các thuộc tính

.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

9,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

30,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

31 và
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

32 đã đề cập trước đó và theo cách đó, chỉ định vị trí và mức độ bạn muốn di chuyển phần tử

Các phần bù

.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

9,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

30,
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

31 và
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

32 đẩy thẻ ra khỏi vị trí được chỉ định, hoạt động ngược lại

Thực tế,

.one {
  background-color: powderblue;
  position: relative;
  right: 50px;
}

9 di chuyển phần tử về phía dưới cùng của vùng chứa chính của phần tử.
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

30 đẩy phần tử về phía trên cùng của vùng chứa chính của phần tử, v.v.

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

________số 8

Vị trí CSS

Ở đây, hình vuông đã di chuyển

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

06 từ bên trái của vị trí được cho là theo mặc định

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

07 thay đổi vị trí của phần tử liên quan đến phần tử cha và liên quan đến chính nó và vị trí thường có 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ử cha

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 của nó 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 giá trị bù trừ này và

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

34, bạn cũng có thể thay đổi thứ tự xuất hiện các thành phầ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

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

3

Vị trí CSS

Thứ tự trực quan hiện đã bị đảo ngược, trong khi mã HTML vẫn giống hệt nhau

Tóm lại, các yếu tố được định vị tương đối có thể di chuyển xung quanh trong khi vẫn ở 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

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

0

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

Vị trí CSS

Đây là hành vi bất ngờ. 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ù đắp như thế này

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

5

Vị trí CSS

Chà, bây giờ hình vuông đã hoàn toàn từ bỏ cha mẹ của nó

Các yếu tố được định vị tuyệt đối hoàn toàn bị loại bỏ khỏi luồng 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 cha được định vị tĩnh

Điều này có nghĩa là nó sẽ được định vị tương đối so với toàn bộ trang, có nghĩa là liên quan đến phần tử

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

09 – gốc của trang

Do đó, tọa độ,

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

50 và
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

51, dựa trên toàn bộ trang

Nếu bạn muốn áp dụng tọa độ cho phần tử cha của nó, bạn cần định vị tương đối phần tử cha bằng cách cập nhật

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

52 trong khi vẫn giữ nguyên
body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

53

body {
  margin: 100px auto;
}

.parent {
  width: 500px;
  border: 1px solid red;
  margin: auto;
  text-align: center;
}

.child {
  border-radius: 10%;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.one {
  background-color: powderblue;
}

.two {
  background-color: royalblue;
}

.three {
  background-color: sienna;
}

.four {
  background-color: slateblue;
}

1

Mã này tạo ra kết quả dưới đây

Vị trí CSS

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

Sự kết luận

Hy vọ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 bạn muốn tìm hiểu thêm về HTML và CSS, bạn có thể lưu và làm việc với 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 từ đầu và nó 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 Chứng chỉ thiết kế web đáp ứng dựa trên dự án tương tác và miễn phí, đâ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 đã đọc và học tập vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Vị trí CSS
Dionysia Lemonaki

Học một cái gì đó mới mỗi ngày và viết về nó


Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

CSS vị trí là gì?

Thuộc tính CSS vị trí đặt cách một phần tử được định vị trong tài liệu . Các thuộc tính top , right , bottom và left xác định vị trí cuối cùng của các phần tử được định vị.

Vị trí tốt nhất trong CSS là gì?

Việc định vị tuyệt đối là tốt nhất nếu bạn cần thứ gì đó được đặt tại một tọa độ chính xác . Định vị tương đối sẽ lấy vị trí của phần tử và thêm tọa độ vào phần tử đó. Vì vậy, ví dụ nếu tôi có một phần tử

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

Chức vụ. quan hệ; . Điều này có nghĩa là nó liên quan đến vị trí ban đầu của nó trong phần tử cha

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

Chức vụ. tương đối đặt một phần tử so với vị trí hiện tại của nó mà không thay đổi bố cục xung quanh nó, trong khi vị trí. tuyệt đối đặt một phần tử so với vị trí của phần tử gốc và thay đổi bố cục xung quanh nó