css - vị trí div đến cuối chứa div

118

Làm cách nào để tôi có thể định vị một div ở dưới cùng của div chứa?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

Mã này đặt văn bản "bên trong" xuống cuối trang.

css position

— nagy.zsolt.hun
nguồn

. nhu cầu bên ngoàiposition: relative;

— Bắt buộc

tương đối, có, và sau đó nó không biết nó cần phải lớn đến mức nào để chứa nội dung con-div, vì vậy, trừ khi đó là giá trị tĩnh, hãy quay lại câu hỏi ban đầu. Làm thế nào để đặt một div ở dưới cùng của một div khác (ngụ ý: "mà không phá vỡ mọi thứ").

— JosephK

Câu trả lời:

136

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Cần phải

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Định vị tuyệt đối sẽ tìm kiếm cha mẹ được định vị tương đối gần nhất trong DOM, nếu một định vị không được xác định, nó sẽ sử dụng phần thân.

— Karl
nguồn

Cảm ơn. Bạn có thể giải thích lý do tại sao?

— nagy.zsolt.hun Ngày

absolutetìm kiếm relativecha mẹ gần nhất . Theo mặc định, nó là bodycủa document. Vì vậy, nếu không có đối tượng DOM cha ( .outside) nào có thuộc tính là relativecủa bạn, .insidethì ý muốn của bạn sẽ được chuyển đến cuối thẻ body.

" Định vị tuyệt đối tìm kiếm vị trí gốc tương đối gần nhất trong DOM, nếu một định vị không được xác định, nó sẽ sử dụng phần thân. " Bạn vừa giải thích rất nhiều cho tôi! Bây giờ tôi thực sự bắt đầu hiểu CSS. CẢM ƠN BẠN!

— Simon Forsberg

Absolute thực sự tìm kiếm tổ tiên được định vị không mặc định (= static) gần nhất, thường được định vị tương đối. Nó cũng không nhất thiết phải là cha mẹ trực tiếp mà có thể là ông bà chẳng hạn.

— mzwaal

Điều này phụ thuộc vào độ cao không đổi, điều này RẤT BỀN. Một sự thay đổi đơn giản về phông chữ, cỡ chữ, phần đệm, lề và chúa biết những gì khác đòi hỏi thử nghiệm để đoán chiều cao mới.

— Anderson

Gán position:relativecho .outside, và sau đó position:absolute; bottom:0;cho của bạn .inside.

Như vậy:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

— dsgriffin
nguồn

Đây có thể là cơ sở cho một footer dính phải không?

— cade galt

Tôi không thể sử dụng vị trí: tuyệt đối; cho div thứ hai. đó là hạn chế của tôi, bạn có thể cho tôi các lựa chọn khác không?

— Piyush Dholariya

Thêm position: relativevào .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Các phần tử được định vị tương đối vẫn được coi là nằm trong luồng thông thường của các phần tử trong tài liệu. Ngược lại, một phần tử được định vị tuyệt đối sẽ được đưa ra ngoài luồng và do đó không chiếm không gian khi đặt các phần tử khác. Phần tử được định vị tuyệt đối được định vị tương đối với tổ tiên được định vị gần nhất. Nếu tổ tiên được định vị không tồn tại, vùng chứa ban đầu sẽ được sử dụng.

"Vùng chứa ban đầu" sẽ là <body>, nhưng việc thêm ở trên làm cho .outsidevị trí.

— Thuốc nổ
nguồn