css - ตำแหน่ง div ที่ด้านล่างของที่มี div

118

ฉันจะวางตำแหน่ง div ที่ด้านล่างสุดของ div ที่มีอยู่ได้อย่างไร

<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>

รหัสนี้ทำให้ข้อความ "อยู่ใน" ที่ด้านล่างของหน้า

css position

— nagy.zsolt.hun
แหล่งที่มา

. outside needsposition: relative;

— Imperative

สัมพัทธ์ใช่แล้วก็ไม่รู้ว่าจะต้องมีขนาดใหญ่เพียงใดในการเก็บเนื้อหา child-div น่าเสียดายดังนั้นเว้นแต่ว่าจะเป็นค่าคงที่กลับไปที่คำถามเดิม วิธีวาง div หนึ่งที่ด้านล่างของ div อื่น (โดยนัย: "โดยไม่ทำลายทุกอย่าง")

— JosephK

คำตอบ:

136

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

จำเป็นต้องเป็น

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

การวางตำแหน่งแบบสัมบูรณ์จะค้นหาพาเรนต์ที่อยู่ในตำแหน่งที่ใกล้ที่สุดภายใน DOM หากไม่ได้กำหนดไว้จะใช้เนื้อความ

— คาร์ล
แหล่งที่มา

ขอบคุณ คุณอธิบายได้ไหมว่าทำไม?

— nagy.zsolt.hun

absoluteค้นหาrelativeผู้ปกครองที่ใกล้ที่สุด โดยค่าเริ่มต้นจะเป็นbodyของไฟล์document. ดังนั้นหากไม่มีอ็อบเจ็กต์ DOM หลัก ( .outside) ที่มีคุณสมบัติเป็นrelativeคุณ.insideจะไปที่ด้านล่างของแท็กเนื้อหา

"การวางตำแหน่งแบบสัมบูรณ์จะมองหาตำแหน่งแม่ที่ใกล้เคียงที่สุดภายใน DOM หากไม่ได้กำหนดไว้ก็จะใช้ร่างกาย " คุณเพิ่งอธิบายให้ฉันฟังมาก! ตอนนี้ฉันเริ่มเข้าใจ CSS แล้ว ขอบคุณ!

— Simon Forsberg

ค่าสัมบูรณ์จะค้นหาบรรพบุรุษที่อยู่ในตำแหน่งที่ไม่ใช่ค่าเริ่มต้น (= คงที่) ที่ใกล้ที่สุดซึ่งมักจะอยู่ในตำแหน่งที่ค่อนข้างเหมาะสม ไม่จำเป็นต้องเป็นพ่อแม่โดยตรง แต่สามารถเป็นปู่ย่าตายายได้

— mzwaal

ขึ้นอยู่กับความสูงคงที่ซึ่งไม่ดีมาก การเปลี่ยนแปลงแบบอักษรขนาดตัวอักษรระยะห่างระยะขอบและพระเจ้าจะรู้ว่ามีอะไรอีกที่ต้องการการทดลองเพื่อคาดเดาความสูงใหม่

— Anderson

มอบหมายposition:relativeให้.outsideแล้วposition:absolute; bottom:0;ไปที่.insideไฟล์.

ชอบมาก:

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

— dsgriffin
แหล่งที่มา

นี่อาจเป็นพื้นฐานสำหรับส่วนท้ายที่เหนียวได้หรือไม่?

— cade galt

ฉันไม่สามารถใช้ตำแหน่ง: สัมบูรณ์; สำหรับ div ที่สอง นั่นคือข้อ จำกัด ของฉันคุณสามารถให้ทางเลือกอื่น ๆ แก่ฉันได้ไหม

— Piyush Dholariya

เพิ่มไปposition: relative .outside( https://developer.mozilla.org/en-US/docs/CSS/position )

องค์ประกอบที่อยู่ในตำแหน่งที่ค่อนข้างจะถือว่ายังคงอยู่ในขั้นตอนปกติขององค์ประกอบในเอกสาร ในทางตรงกันข้ามองค์ประกอบที่อยู่ในตำแหน่งจะถูกนำออกจากโฟลว์อย่างแน่นอนดังนั้นจึงไม่ใช้พื้นที่ว่างเมื่อวางองค์ประกอบอื่น ๆ องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะอยู่ในตำแหน่งที่สัมพันธ์กับบรรพบุรุษที่อยู่ใกล้ที่สุด หากไม่มีบรรพบุรุษที่อยู่ในตำแหน่งระบบจะใช้คอนเทนเนอร์เริ่มต้น

"คอนเทนเนอร์เริ่มต้น" จะเป็น<body>แต่การเพิ่มด้านบนทำให้.outsideอยู่ในตำแหน่ง

— ยาระเบิด
แหล่งที่มา