CSS display: block và position: fixed

Question

Tại sao mã này:

div { 
    background-color: yellow; 
    display:block; 
    position:fixed; 
} 

không hiển thị div như display:block (ví dụ: dòng chảy trên trang) khi tôi thêm position:fixed? Có vẻ như nó hoạt động không?

N.B. Tôi rất mới với CSS vì vậy tôi appologise nếu nó chỉ là một lỗi ngớ ngẩn

Answer 1

Bạn cần thêm chiều rộng và chiều cao cho bất kỳ thành phần [trống] nào với vị trí fixed hoặc absolute, nếu không chúng sẽ không có kích thước.

HTML:

<div><div> 

CSS:

div { 
    background-color: yellow; 
    display:block; 
    position:fixed; 
    width:100px; 
    height:100px; 
} 

DEMO

Cuối cùng u cần một cái gì đó giống như this

Answer 2

Khi bạn sử dụng position: fixed; hoặc position: absolute;, nguyên tố này được đưa ra khỏi sự tái dòng chảy của tài liệu.

Cài đặt mặc định cho width cho thành phần div là auto, có nghĩa là nó sẽ sử dụng toàn bộ chiều rộng có sẵn ở vị trí hiện tại. Khi bạn lấy nó ra khỏi luồng, không còn bất kỳ thước đo khả dụng nào cho chiều rộng có sẵn (vì đó sẽ là vô hạn), vì vậy thay vào đó phần tử sẽ lấy chiều rộng của nó từ nội dung của nó.