วางตำแหน่งองค์ประกอบที่สัมพันธ์กับคอนเทนเนอร์

ฉันกำลังพยายามสร้างกราฟแท่งกองซ้อน 100% ในแนวนอนโดยใช้ HTML และ CSS ฉันต้องการสร้างแท่งโดยใช้DIVsสีพื้นหลังและความกว้างร้อยละขึ้นอยู่กับค่าที่ฉันต้องการกราฟ ฉันยังต้องการให้มีเส้นกริดเพื่อทำเครื่องหมายตำแหน่งโดยพลการตามกราฟ

float: leftในการทดลองของฉันฉันเคยอยู่แล้วบาร์เพื่อสแต็คในแนวนอนโดยการกำหนดคุณสมบัติของ CSS อย่างไรก็ตามฉันต้องการหลีกเลี่ยงสิ่งนี้เนื่องจากดูเหมือนว่าจะยุ่งกับเค้าโครงในแบบที่สับสน นอกจากนี้เส้นกริดดูเหมือนว่าจะทำงานได้ไม่ดีนักเมื่อบาร์ลอย

ฉันคิดว่าการวางตำแหน่ง CSS ควรจะสามารถจัดการกับสิ่งนี้ได้ แต่ฉันยังไม่รู้ว่าจะทำอย่างไร ฉันต้องการที่จะสามารถระบุตำแหน่งขององค์ประกอบต่าง ๆ ที่เกี่ยวข้องกับมุมบนซ้ายของภาชนะของพวกเขา ฉันพบปัญหาประเภทนี้เป็นประจำ (แม้จะอยู่นอกโครงการกราฟนี้โดยเฉพาะ) ดังนั้นฉันต้องการวิธีที่:

1. ข้ามเบราว์เซอร์ (โดยไม่ต้องมีเบราว์เซอร์จำนวนมากเกินไป)
2. ทำงานในโหมด Quirks
3. ชัดเจน / สะอาดที่สุดเพื่ออำนวยความสะดวกในการปรับแต่ง
4. ทำโดยไม่ใช้ JavaScript ถ้าเป็นไปได้

คุณถูกต้องแล้วที่ตำแหน่ง CSS เป็นวิธีที่จะไป นี่คือการเรียกใช้อย่างรวดเร็ว:

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

อย่างไรก็ตามคุณอาจสนใจposition: absoluteที่จะจัดวางองค์ประกอบที่สัมพันธ์กับตู้คอนเทนเนอร์ ตามค่าเริ่มต้นคอนเทนเนอร์คือหน้าต่างเบราว์เซอร์ แต่ถ้าองค์ประกอบหลักมีposition: relativeหรือposition: absoluteตั้งค่าไว้บนนั้นคอนเทนเนอร์นั้นจะทำหน้าที่เป็นพาเรนต์สำหรับการวางตำแหน่งพิกัดสำหรับเด็ก ๆ

เพื่อสาธิต:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

ในตัวอย่างที่ด้านบนซ้ายมุมของ#boxจะ 100px ลงและ 50px #containerซ้ายมุมบนด้านซ้ายของ หาก#containerไม่ได้position: relativeตั้งค่าพิกัดของ#boxจะสัมพันธ์กับมุมซ้ายบนของพอร์ตมุมมองเบราว์เซอร์

คุณต้องกำหนดตำแหน่งของคอนเทนเนอร์หลักอย่างชัดเจนพร้อมกับตำแหน่งของคอนเทนเนอร์ย่อย วิธีทั่วไปในการทำเช่นนี้:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

ฉันรู้ว่าฉันมาสาย แต่หวังว่าสิ่งนี้จะช่วยได้

ต่อไปนี้เป็นค่าสำหรับคุณสมบัติตำแหน่ง

• คงที่
• แก้ไขแล้ว
• ญาติ
• แน่นอน

ตำแหน่ง: คงที่

นี่คือค่าเริ่มต้น มันหมายถึงองค์ประกอบที่จะเกิดขึ้นในตำแหน่งที่มันจะตามปกติ

#myelem {
    position : static;
}

ตำแหน่ง: คงที่

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

(เหมาะอย่างยิ่งหากคุณต้องการปุ่มเลื่อนขึ้น - ลงที่มุมขวาล่างของหน้า)

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

ตำแหน่ง: ญาติ

ในการวางองค์ประกอบที่ตำแหน่งใหม่เทียบกับตำแหน่งเดิม

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

CSS ด้านบนจะย้ายองค์ประกอบ #myelem 30px ไปทางซ้ายและ 30px จากด้านบนสุดของตำแหน่งจริง

ตำแหน่ง: แน่นอน

ถ้าเราต้องการที่จะวางองค์ประกอบในตำแหน่งที่แน่นอนในหน้า

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

CSS ด้านบนจะวางตำแหน่งองค์ประกอบ #myelem ที่ตำแหน่ง 30px จากด้านบนและ 300px จากด้านซ้ายในหน้าและจะเลื่อนพร้อมกับหน้า

และในที่สุดก็...

ตำแหน่งญาติ + สัมบูรณ์

เราสามารถกำหนดตำแหน่งคุณสมบัติขององค์ประกอบหลักที่จะญาติแล้วกำหนดตำแหน่งคุณสมบัติขององค์ประกอบเด็กที่จะแน่นอน วิธีนี้เราสามารถวางตำแหน่งเด็กที่สัมพันธ์กับผู้ปกครองในตำแหน่งที่แน่นอน

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

เราสามารถเห็นได้จากภาพด้านบนองค์ประกอบ# div-2อยู่ในตำแหน่งที่มุมบนขวาภายในองค์ประกอบ#container

GitHub: คุณสามารถค้นหา HTML ของภาพดังกล่าวข้างต้นที่นี่และ CSS ที่นี่

หวังว่าบทช่วยสอนนี้จะช่วยให้

การวางตำแหน่งแบบสัมบูรณ์จะวางตำแหน่งองค์ประกอบที่สัมพันธ์กับบรรพบุรุษที่อยู่ใกล้ที่สุด ดังนั้นใส่position: relativeในภาชนะแล้วสำหรับองค์ประกอบเด็กtopและจะเทียบกับด้านซ้ายบนของภาชนะตราบใดที่องค์ประกอบของเด็กได้left position: absoluteข้อมูลเพิ่มเติมสามารถดูได้ในCSS ที่ 2.1 สเปค

หากคุณจำเป็นต้องวางตำแหน่งขององค์ประกอบที่สัมพันธ์กับองค์ประกอบที่มีเป็นครั้งแรกที่คุณจะต้องเพิ่มไปยังองค์ประกอบภาชนะposition: relative องค์ประกอบเด็กคุณต้องการตำแหน่งสัมพัทธ์กับผู้ปกครองจะต้องมี position: absoluteวิธีการที่ตำแหน่งแน่นอนทำงานคือมันจะทำเมื่อเทียบกับครั้งแรกค่อนข้าง (หรืออย่าง) ตำแหน่งองค์ประกอบหลัก ในกรณีที่ไม่มีผู้ปกครองตำแหน่งค่อนข้างองค์ประกอบจะถูกวางตำแหน่งสัมพันธ์กับองค์ประกอบราก (โดยตรงกับองค์ประกอบ HTML)

ดังนั้นหากคุณต้องการวางองค์ประกอบลูกของคุณไปทางซ้ายบนของคอนเทนเนอร์หลักคุณควรทำสิ่งนี้:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

คุณจะได้รับประโยชน์อย่างมากจากการอ่านบทความนี้ หวังว่านี่จะช่วยได้!