Vị trí một yếu tố liên quan đến container của nó

Tôi đang cố gắng tạo một biểu đồ thanh xếp chồng 100% theo chiều ngang bằng HTML và CSS. Tôi muốn tạo các thanh bằng cách sử dụng DIVsmàu nền và độ rộng phần trăm tùy thuộc vào các giá trị tôi muốn vẽ biểu đồ. Tôi cũng muốn có một đường lưới để đánh dấu một vị trí tùy ý dọc theo biểu đồ.

Trong thử nghiệm của mình, tôi đã nhận được các thanh để xếp theo chiều ngang bằng cách gán thuộc tính CSS float: left. Tuy nhiên, tôi muốn tránh điều đó, vì nó thực sự có vẻ lộn xộn với bố cục theo những cách khó hiểu. Ngoài ra, các đường lưới dường như không hoạt động rất tốt khi các thanh được thả nổi.

Tôi nghĩ rằng định vị CSS sẽ có thể xử lý việc này, nhưng tôi chưa biết cách thực hiện. Tôi muốn có thể chỉ định vị trí của một số phần tử liên quan đến góc trên bên trái của thùng chứa của chúng. Tôi thường xuyên gặp phải loại vấn đề này (thậm chí bên ngoài dự án đồ thị cụ thể này), vì vậy tôi muốn một phương pháp:

1. Trình duyệt chéo (lý tưởng là không có quá nhiều hack trình duyệt)
2. Chạy ở chế độ Quirks
3. Càng rõ ràng / sạch sẽ càng tốt, để tạo điều kiện cho các tùy chỉnh
4. Thực hiện mà không cần JavaScript nếu có thể.

Bạn đã đúng rằng định vị CSS là con đường để đi. Dưới đây là một cách nhanh chóng:

position: relativesẽ bố trí một yếu tố liên quan đến chính nó. Nói cách khác, các phần tử được đặt trong luồng bình thường, sau đó nó được loại bỏ khỏi luồng bình thường và được bù bởi bất kỳ giá trị nào bạn đã chỉ định (trên, phải, dưới, trái). Điều quan trọng cần lưu ý là vì nó bị xóa khỏi dòng chảy, các yếu tố khác xung quanh nó sẽ không thay đổi theo nó (thay vào đó hãy sử dụng lề âm nếu bạn muốn hành vi này).

Tuy nhiên, rất có thể bạn quan tâm đến việc position: absolutesẽ định vị một yếu tố liên quan đến một container. Theo mặc định, vùng chứa là cửa sổ trình duyệt, nhưng nếu một phần tử cha có position: relativehoặc position: absoluteđược đặt trên nó, thì nó sẽ đóng vai trò là cha mẹ để định vị tọa độ cho con của nó.

Để lam sang tỏ:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

Trong ví dụ đó, góc trên cùng bên trái #boxsẽ là 100px xuống và 50px bên trái của góc trên cùng bên trái của #container. Nếu #containerkhông được position: relativeđặt, tọa độ của #boxsẽ tương đối với góc trên cùng bên trái của cổng xem trình duyệt.

Bạn phải đặt rõ ràng vị trí của thùng chứa cha cùng với vị trí của thùng chứa con. Cách điển hình để làm điều đó là một cái gì đó như thế này:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Tôi biết tôi đến muộn nhưng hy vọng điều này sẽ giúp.

Sau đây là các giá trị cho thuộc tính vị trí.

• tĩnh
• đã sửa
• quan hệ
• tuyệt đối

vị trí: tĩnh

Đây là mặc định. Nó có nghĩa là phần tử sẽ xảy ra tại một vị trí mà nó thường làm.

#myelem {
    position : static;
}

vị trí: cố định

Điều này sẽ đặt vị trí của một phần tử đối với cửa sổ trình duyệt (khung nhìn). Một phần tử được định vị cố định sẽ vẫn ở vị trí của nó ngay cả khi trang cuộn.

(Lý tưởng nếu bạn muốn nút cuộn lên trên ở góc dưới bên phải của trang).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

vị trí: tương đối

Để đặt một yếu tố tại một vị trí mới so với vị trí ban đầu của nó.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

CSS ở trên sẽ di chuyển phần tử #myelem 30px sang bên trái và 30px từ đầu vị trí thực tế của nó.

vị trí: tuyệt đối

Nếu chúng ta muốn một yếu tố được đặt ở một vị trí chính xác trong trang.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

CSS ở trên sẽ định vị phần tử #myelem ở vị trí 30px từ trên xuống và 300px từ bên trái trong trang và nó sẽ cuộn với trang.

Và cuối cùng...

vị trí tương đối + tuyệt đối

Chúng ta có thể đặt thuộc tính vị trí của phần tử cha thành tương đối và sau đó đặt thuộc tính vị trí của phần tử con thành tuyệt đối . Bằng cách này, chúng ta có thể định vị đứa trẻ so với cha mẹ ở một vị trí tuyệt đối.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Chúng ta có thể thấy trong hình trên, phần tử # div-2 được đặt ở góc trên bên phải bên trong phần tử #container .

GitHub: Bạn có thể tìm mã HTML của hình trên đây và CSS ở đây .

Hy vọng hướng dẫn này sẽ giúp.

Vị trí tuyệt đối định vị một yếu tố liên quan đến tổ tiên định vị gần nhất của nó. Vì vậy, đặt position: relativetrên container, sau đó cho các phần tử con topvà leftsẽ liên quan đến phần trên cùng bên trái của container miễn là các phần tử con có position: absolute. Thông tin thêm có sẵn trong đặc tả CSS 2.1 .

Nếu bạn cần định vị một phần tử so với phần tử chứa nó trước tiên, bạn cần thêm position: relative vào phần tử container . Yếu tố con bạn muốn định vị tương đối với cha mẹ phải có position: absolute . Cách mà định vị tuyệt đối hoạt động là nó được thực hiện so với phần tử cha được định vị tương đối (hoặc hoàn toàn) đầu tiên . Trong trường hợp không có cha mẹ tương đối được định vị, phần tử sẽ được định vị so với phần tử gốc (trực tiếp với phần tử HTML).

Vì vậy, nếu bạn muốn định vị phần tử con của bạn ở phía trên bên trái của vùng chứa cha, bạn nên làm điều này:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Bạn sẽ được hưởng lợi rất nhiều từ việc đọc bài viết này . Hi vọng điêu nay co ich!