Sử dụng tất cả bốn thông số định vị với vị trí: tuyệt đối - điều này có được chấp nhận không?

Question

Tôi đã cung cấp ý tưởng này để cung cấp CSS lớp phủ, làm câu trả lời cho another question. Tôi đã không nghĩ đến việc sử dụng loại cú pháp này trong quá khứ nhưng tôi không thể nghĩ ra bất kỳ vấn đề nào có thể liên quan đến việc sử dụng nó.

Theo như tôi có thể nói công trình này - và nếu được chấp nhận, tôi nghĩ rằng nó cung cấp một giải pháp sáng tạo - nhưng tôi không thấy nó được sử dụng thường xuyên.

Ai đó có thể giải thích cho tôi tại sao nó có thể xấu?

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: #444; 

    /* add some opacity here */ 
} 

Answer 1

Các nhánh có trụ sở này spec cho yếu tố phi thay thế (một div là một tổ chức phi thay thế phần tử):

Nếu cả ba 'left', ' width ', và ' right 'là' auto ': Trước hết hãy đặt bất kỳ giá trị' tự động ' ' 'sang' margin-left 'và ' margin-right 'thành 0. Sau đó, nếu thuộc tính ' direction 'của phần tử thiết lập vị trí tĩnh khối chứa là 'ltr' set 'left' đến vị trí tĩnh và áp dụng quy tắc số ba dưới đây; nếu không, hãy đặt 'phải' thành vị trí tĩnh và áp dụng số quy tắc bên dưới.

(vì tất cả 3 thuộc tính không tự động, điều kiện trên là không được đáp ứng)

Nếu không ai trong số ba là 'tự động': Nếu cả 'margin-left' và ' margin-right ' là' tự động ', giải phương trình theo ràng buộc bổ sung rằng hai lề có giá trị bằng nhau, trừ khi điều này sẽ làm cho chúng âm, trong đó trường hợp khi hướng của khối chứa là' ltr ' ('rtl'), được đặt 'lề trái' ('lề phải') thànhvà giải quyết 'lề phải' ('lề trái'). Nếu một trong số 'lề trái' hoặc 'lề phải' là 'tự động', hãy giải phương trình cho giá trị đó. Nếu các giá trị là quá giới hạn, hãy bỏ qua giá trị cho 'trái' (trong trường hợp 'hướng' thuộc tính của khối chứa là 'rtl') hoặc 'right' (trong trường hợp 'hướng' là 'ltr ') và giải quyết cho giá trị đó.

(kể từ chiều rộng là tự động, điều kiện trên được không được đáp ứng)

Nếu không, thiết lập 'tự động' giá trị cho 'margin-left' và 'margin-right' 0, và chọn một trong sáu quy tắc sau đây áp dụng.

(điều kiện trên được đáp ứng )

Và vì vậy chúng tôi đang trái với những 6:

1. 'trái' và 'width' là 'tự động' và 'đúng 'không phải là' tự động ', sau đó chiều rộng là thu nhỏ để phù hợp. Sau đó, giải quyết 'left'

2. 'left' và 'right' là 'auto' và 'width' không phải là 'auto', sau đó nếu thuộc tính 'direction' của phần tử thiết lập khối chứa vị trí tĩnh là 'ltr' đặt 'trái' sang vị trí tĩnh, nếu không đặt 'đúng' thành vị trí tĩnh. Sau đó, giải quyết cho 'left' (nếu 'direction is' rtl ') hoặc' right '(nếu' direction 'là' ltr ').

3. 'chiều rộng' và 'phải' là 'tự động' và 'trái' không phải là 'tự động', sau đó chiều rộng thu nhỏ. Sau đó giải quyết cho 'đúng'

4. 'left' là 'tự động', 'width' và 'đúng' không 'tự động', sau đó giải quyết cho 'left'

5. 'width' được 'tự động ',' trái 'và' phải 'không phải là' tự động ', sau đó giải quyết cho' width '

6. ' right 'is' auto ',' left 'và' width 'không phải là' auto ', sau đó giải cho 'right'

Dựa trên chiều rộng ở trên, phần tử đó tự động là Vì vậy, nếu bạn chỉ định một trái và phải nó giải quyết cho chiều rộng, vì vậy nó phải hợp lệ.

Vì vậy, mặc dù nó hoàn toàn hợp lệ theo thông số CSS2.1/CSS3, nhưng nó không hoạt động trong IE6. Nó hoạt động trong IE7, IE8, Firefox 3 và Chrome.

Answer 2

Tôi đoán câu hỏi để hỏi là những gì lợi ích có bằng cách sử dụng giải pháp của bạn trên này:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100% 
} 

Đó là tương thích hơn và dễ đọc hơn. Trong khi máy của bạn là một giải pháp sáng tạo hơn, có vẻ như hành vi CSS không mong muốn để đặt chiều rộng/chiều cao của phần tử bằng cách đặt giới hạn/chiều cao của phần tử và việc triển khai trình duyệt có thể thay đổi trong trường hợp này trong tương lai.

Answer 3

Giải pháp của bạn does not work with images, iframe và các loại khác replaced elements.

Điều này là do tiêu chuẩn CSS áp đặt cơ chế tính toán thứ nguyên khác nhau trên các phần tử được thay thế. (Thông số kỹ thuật Nhàm chán: http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width)