vị trí css tuyệt đối với trên cùng và dưới cùng cả hai

Question

Tôi đang sử dụng position: absolute; trên div.

fiddle

Mã của tôi là:

.ab { 
    background: none repeat scroll 0 0 #FF0000; 
    bottom: 0; 
    height: 100px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100px; 
} 

Tôi muốn biết tại sao nó trên đầu ngay cả khi tôi đã chỉ định bottom: 0? Có vấn đề ưu tiên nào giữa đầu và cuối không? Hoặc lý do là gì?

Answer 1

Ưu tiên CSS trên cùng/trái qua dưới cùng/phải. Nếu bạn cung cấp cả hai, nó sẽ sử dụng trên cùng/trái thay vì dưới/phải.

Không có trường hợp hợp lệ để cung cấp cả hai (nếu bạn có chiều cao và chiều rộng được xác định).

Answer 2

Ưu tiên hàng đầu và bên trái phía dưới và bên phải.

Nhưng lưu ý rằng bạn chỉ thấy hành vi này vì bạn đã chỉ định chiều cao. Nếu bạn đã chỉ định top: 0 và bottom: 0 mà không có chiều cao cố định, thì div sẽ kéo dài từ trên xuống dưới của tổ tiên đầu tiên của nó với vị trí không tĩnh. Chỉ định tất cả bốn không có chiều cao hoặc chiều rộng và nó sẽ lấp đầy toàn bộ khu vực có sẵn của phụ huynh đó, as you can see in this jsFiddle.

Answer 3

Có top: có ưu tiên cao hơn bottom: nếu bạn đang sử dụng cả hai top và bottom. Nó sẽ liên kết với giá trị được đưa ra bởi top.

Top và Left có ưu tiên hơn

Answer 4

Yes. Tất cả các trình duyệt bắt đầu đếm tọa độ từ đầu trang. Bạn có thuộc tính cao nhất và thuộc tính chiều cao. Đầu tiên thiết lập vị trí trên cùng của phần tử, sau đó chiều cao của nó và sau đó vị trí dưới cùng.

Nếu bạn loại bỏ thuộc tính chiều cao - khối của bạn sẽ từ trên xuống dưới. (100% chiều cao);

Answer 5

Từ Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/top

Khi cả hai top và bottom được quy định, miễn là height là không xác định, auto, hoặc 100%, cả top và bottom khoảng cách sẽ được tôn trọng. Nếu không, nếu height bị ràng buộc theo bất kỳ cách nào, thuộc tính top được ưu tiên và thuộc tính bottom bị bỏ qua.

Trong ví dụ của bạn, bạn đã tuyên bố một bộ height cũng như cả một vị trí top và bottom, vì vậy top vị trí được ưu tiên, và bottom bị bỏ qua (và không phụ thuộc vào thứ tự mà bạn liệt kê top và bottom).