Tại sao vị trí cố định thay đổi chiều rộng của một phần tử?

Question

Tôi có một số <div> có chiều rộng được đặt là 100%. Khi tôi thêm position:fixed vào nó, chiều rộng sẽ trở thành 16px lớn hơn.

Tôi nhận thấy rằng trên cơ thể, có 8px lề trên tất cả các bên, vì vậy tôi đoán rằng position:fixed bằng cách nào đó bỏ qua các lề của thẻ nội dung chứa trong đó.

Tôi đã xem số MDN Reference nhưng không thể tìm thấy bất kỳ điều gì giải thích những gì đang diễn ra.

Điều gì đã position:fixed thay đổi về <div> gây ra hành vi này?

Ví dụ: http://jsfiddle.net/UpeXV/

Answer 1

body tự động có một lề là 8px. Vì vậy, khi bạn đặt width của phần tử thành 100%, nó sẽ trở thành chiều rộng của cơ thể, ít hơn 8px trên cả hai mặt.

Nhưng khi bạn đưa phần tử position:fixed, nó không còn được đặt tương đối so với phần thân nhưng đối với khung nhìn, không có lề. Vì vậy, width hiện là chiều rộng của chế độ xem, rộng hơn là 2 * 8px - số 16px mà bạn quan sát.

Đây là W3 documentation on the subject:

Trong khi vị trí và kích thước của một phần tử với position: absolute có liên quan đến khối chứa của nó, vị trí và kích thước của một phần tử với position: fixed luôn tương đối so với ban đầu chứa khối. Đây thường là chế độ xem: cửa sổ trình duyệt hoặc hộp trang của giấy.

Answer 2

Dường như khi bạn thiết lập một yếu tố để position:fixed, phải mất trên chiều rộng của khung nhìn thay vì mẹ của nó.

Định vị cố định tương tự như định vị tuyệt đối, trừ trường hợp khối chứa của phần tử là khung nhìn.

MDN CSS Position Reference

Cảm ơn ý kiến ​​của bạn.

Answer 3

Đây là hành vi mặc định cho các phần tử cố định, vì phần tử cố định không tự định hướng trong ngữ cảnh cho bố cục gần nhất nhưng khung nhìn, do đó được cố định trong cửa sổ. Chiều rộng 16px đến từ thực tế, như bạn đã chỉ ra chính mình, rằng cơ thể có một lề mặc định là 8px.

Answer 4

Nếu bạn cần phần tử cố định có chiều rộng 100% và bạn vẫn muốn không gian, bạn có thể xem xét sử dụng box-sizing: border-box. Sau đó sử dụng padding, chứ không phải lề, để tạo không gian. Điều này sẽ cho phép các yếu tố cố định để kéo dài chiều rộng của trang mà không đi qua. Lề và đường viền và đệm luôn được thêm vào kích thước của một phần tử, trừ khi bạn sử dụng mô hình border-box, trong trường hợp này chiều rộng sẽ bao gồm đệm và đường viền.

Xem: http://css-tricks.com/box-sizing/