การวางตำแหน่งแบบสัมบูรณ์โดยไม่สนใจการขยายของผู้ปกครอง

173

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

ดังนั้นฉันต้องการสิ่งนี้:

ป้อนคำอธิบายรูปภาพที่นี่

แต่ฉันได้รับสิ่งนี้:

ป้อนคำอธิบายรูปภาพที่นี่

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

ฉันสามารถทำให้มันเกิดขึ้นได้ด้วยระยะห่างจาก div ภายใน แต่ฉันไม่ต้องการเพิ่มมัน

css padding css-position

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

5

ทำไมไม่เปลี่ยนด้านซ้าย / ขวา / ล่างของ div ภายในเป็นstyle="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?

— j08691

12

ใช่ฉันคิดอย่างนั้น แต่มันก็กลายเป็นเรื่องปวดหัวในการบำรุงรักษาอย่างรวดเร็วเพราะเด็กทุกคนต้องมีออฟเซ็ตของตัวเองเพื่อรับผิดชอบ หากพวกเขาจะให้เกียรติกับการเติมเต็มของผู้ปกครองคุณสามารถตั้งค่าเพียงครั้งเดียวในผู้ปกครองและไม่ต้องกังวลเกี่ยวกับเด็กทุกคน

— d512

ตามที่กล่าวไว้ข้างต้นหากคุณใช้ค่าของการเว้นช่องว่างของผู้ปกครอง (ตำแหน่งที่สัมพันธ์กัน) เป็นleft:และและright:บนเด็ก (ตำแหน่งที่แน่นอน) ปัญหาของคุณจะถูกแก้ไข ฉันกำลังเพิ่ม b / c นี้ซึ่งเป็นคำตอบที่คนอื่นที่มีปัญหาเดียวกันน่าจะมองหา

— rda3000

มีปัญหาที่คล้ายกันที่นี่: jsfiddle.net/5n4By/6 ส่วนท้ายคือการเคารพช่องว่างด้านซ้ายของผู้ปกครอง แต่จะล้นด้านขวา คุณคาดหวังว่ามันจะให้เกียรติแก่ช่องว่างภายในที่ถูกต้องและอยู่อย่างสม่ำเสมอ ...

— rafiki_rafi

186

ก่อนอื่นมาดูสาเหตุที่เกิดขึ้น

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

นี่คือส่วนที่เกี่ยวข้องของข้อมูลจำเพาะ CSS :

ในกรณีที่บรรพบุรุษเป็นองค์ประกอบอินไลน์บล็อกที่มีเป็นกล่องล้อมรอบกล่องช่องว่างของแรกและกล่องอินไลน์สุดท้ายที่สร้างขึ้นสำหรับองค์ประกอบนั้น .... มิฉะนั้นบล็อกที่มีจะเกิดขึ้นจากขอบของ บรรพบุรุษ

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

เพิ่มพิเศษค่อนข้างตำแหน่งdiv(ไม่มีช่องว่าง) divรอบตำแหน่งอย่างแน่นอน ใหม่divจะเคารพ padding ของผู้ปกครองของตนและตำแหน่งที่แน่นอนdivแล้วจะเติมเต็ม

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

ข้อเสียที่นี่คือคุณต้องทำซ้ำค่าใน CSS ของคุณซึ่งจะเปราะถ้าคุณกำลังเขียน CSS โดยตรง อย่างไรก็ตามหากคุณใช้เครื่องมือประมวลผลล่วงหน้าเช่นSASSหรือLESSคุณสามารถหลีกเลี่ยงปัญหานั้นได้โดยใช้ตัวแปร นี่คือวิธีที่ฉันใช้เป็นการส่วนตัว

— Kevin Christopher Henry
แหล่งที่มา

นี่คือเหตุผลที่เริ่มต้นสำหรับposition: absolute? เป็นเรื่องที่น่าแปลกใจที่กล่องที่บรรจุนั้นเป็นช่องว่างภายใน แต่ต้องมีเหตุผลเช่นเดียวกับฉันแน่ใจว่ามีเหตุผลว่าทำไม (ไม่มีbox-sizing) width& heightไม่รวมช่องว่างภายในหรือขอบ

— trysis

1

การเพิ่มเพียงอย่างเดียว: ไม่มีสิ่งใดที่ได้รับผลกระทบจากbox-sizingคุณสมบัตินี้กับผู้ปกครองหรือเด็ก นี่เป็นเพราะที่มีผลต่อการปรับขนาดเช่นเดียวกับในความกว้าง / ความสูง แต่ไม่ใช่กล่องที่มีแม้ว่าฉันจะยอมรับว่ามันจะเหมาะสมกว่าหากมีผลกระทบกับทั้งคู่

— trysis

2

นี่เป็นข้อมูลที่ดี แต่มันเป็นคำตอบที่ผิด คำตอบที่ถูกคือ Winter's ด้านล่าง .... ใช้การเติม: สืบทอดและองค์ประกอบแอบโซลูทของคุณจะได้รับการเติมเต็มตามที่ต้องการ ไม่ทราบว่าทำไมถึงมี upvotes มากกว่าคำตอบที่ถูกต้อง ... : P

— NotaGuruAtAll

1

@NotaGuruAtAll: padding: inheritทำงานได้ดีถ้าตำแหน่งที่แน่นอนdivไม่ต้องการช่องว่างภายในของตัวเองและฉันได้เพิ่มการกล่าวถึงเทคนิคนั้น มันมีความยืดหยุ่นน้อยกว่าเพราะคุณไม่สามารถเพิ่มช่องว่างภายในใด ๆ ไปยังตำแหน่งที่แน่นอนได้div(เช่นคุณไม่สามารถพูดได้padding: inherit + 5px) นั่นเป็นเหตุผลที่ฉันชอบเทคนิคที่ฉันพูดถึงที่นี่

— Kevin Christopher Henry

1

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

— Dylan Pierce

51

สิ่งหนึ่งที่คุณสามารถลองใช้ css ต่อไปนี้:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

มันช่วยให้องค์ประกอบของเด็กรับมรดกจากการขยายจากผู้ปกครองแล้วเด็กสามารถวางตำแหน่งให้ตรงกับผู้ปกครอง widht และการขยาย

นอกจากนี้ฉันใช้box-sizing: border-box;สำหรับองค์ประกอบที่เกี่ยวข้อง

ฉันไม่ได้ทดสอบสิ่งนี้ในเบราว์เซอร์ทั้งหมด แต่ดูเหมือนว่าจะใช้งานได้ใน Chrome, Firefox และ IE10

— ฤดูหนาว
แหล่งที่มา

ฉันรวมคำตอบนี้และคำตอบของ @NewSpender ในกรณีของฉัน div ตำแหน่งที่แน่นอนยังคงไม่สนใจการขยาย แต่ถูกล้อมรอบด้วยองค์ประกอบหลัก ดังนั้นการให้ div ที่อยู่ในตำแหน่งที่แน่นอนพร้อมด้วยเส้นขอบสีขาวหนาทำให้เกิดช่องว่างภายในที่ฉันต้องการ สิ่งที่จำเป็นต้องมีก่อนคือพื้นหลังของคุณต้องเป็นสีเดียวกัน

— Ogier Schelvis

แต่ OP ไม่ต้องการให้เด็กรับส่วนเสริมภายในของผู้ปกครอง เขาต้องการให้เด็กได้รับการชดเชยตามช่องว่างภายในของผู้ปกครอง

— Michael Gummelt

30

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

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

8

ใช้มาร์จิ้นแทนการแพ็ดดิ้งใน div parent: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

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

โปรดทราบว่าพื้นหลัง (สี) ไม่ได้ใช้กับระยะขอบเหมือนกับการขยาย

— Paul

6

นี่คือช็อตที่ดีที่สุดของฉัน ฉันเพิ่ม Div อื่นและทำให้มันเป็นสีแดงและเปลี่ยนความสูงของผู้ปกครองเป็น 200px เพื่อทดสอบ ความคิดคือตอนนี้เด็กกลายเป็นหลานและผู้ปกครองกลายเป็นปู่ย่าตายาย ดังนั้นผู้ปกครองเคารพผู้ปกครองของตน หวังว่าคุณจะได้รับความคิดของฉัน

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

แก้ไข:

ฉันคิดว่าสิ่งที่คุณพยายามทำไม่สามารถทำได้ ตำแหน่งที่แน่นอนหมายความว่าคุณจะให้พิกัดมันต้องให้เกียรติ เกิดอะไรขึ้นถ้าผู้ปกครองมีช่องว่างภายใน 5px และคุณวางตำแหน่งเด็กไว้ที่ด้านบน: -5px; ซ้าย: -5px เป็นไปได้อย่างไรที่จะให้เกียรติผู้ปกครองและคุณในเวลาเดียวกัน?

ทางออกของฉัน

หากคุณต้องการให้เกียรติผู้ปกครองอย่าวางตำแหน่งนั้นอย่างเด็ดขาด

— สัมผัส
แหล่งที่มา

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

— d512

หากคุณวางตำแหน่งแน่นอนพวกเขาจะไม่ให้เกียรติองค์ประกอบหลักของพวกเขา พวกเขาจะให้เกียรติคุณ ด้วยเหตุผลเดียวกันหากคุณไม่ได้วางตำแหน่งอย่างแน่นอนคุณจะไม่สามารถใช้สิ่งต่าง ๆ เช่นด้านล่าง: 10pxเพราะพวกเขาให้เกียรติองค์ประกอบหลักของพวกเขา แต่สิ่งที่คุณต้องการทำฉันเดาว่าจะทำให้มีพื้นที่สำหรับความขัดแย้งและดังนั้นมันจะแตกต่างกันในเบราว์เซอร์ ฉันคิดว่าจะมีวิธีแก้ไขเพียงอย่างเดียวเท่านั้น

— แตะ

3

การวางตำแหน่งแบบสัมบูรณ์จะให้เกียรติผู้ปกครองนั่นคือระบบพิกัดที่ใช้ เมื่อคุณพูดอันดับสูงสุด 0px นั่นหมายถึง 0px อยู่ห่างจากด้านบนของผู้ปกครอง คำถามคือควรคำนึงถึงผู้ปกครองที่มีช่องว่างภายในหรือไม่ หากผู้ปกครองมีช่องว่างภายใน 5px และคุณให้ด้านบนของเด็ก: -5px ก็จะทำให้มันล้างด้วยผู้ปกครองถ้าเป็นเกียรติของผู้ปกครองหรือ 5px เหนือผู้ปกครองถ้ามันไม่ได้

— d512

3

1. ) คุณไม่สามารถใช้เส้นขอบขนาดใหญ่บนพาเรนต์ - ในกรณีที่คุณต้องการมีขอบเฉพาะ

2. ) คุณไม่สามารถเพิ่มระยะขอบ - ในกรณีที่พาเรนต์ของคุณเป็นส่วนหนึ่งของคอนเทนเนอร์อื่นและคุณต้องการให้พาเรนเต็ม ความกว้างของผู้ปกครองที่ยิ่งใหญ่

ทางออกเดียวที่ควรนำมาใช้คือห่อลูกของคุณในภาชนะอื่นเพื่อให้พ่อแม่ของคุณกลายเป็นปู่ย่าตายายและจากนั้นนำไปใช้กับช่องว่างภายในกับ Wrapper / Parent เด็กใหม่ หรือคุณสามารถสมัครโดยตรงกับเด็ก

ในกรณีของคุณ:

.css-sux{
  padding: 0px 10px 10px 10px;
}

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

1

สามารถทำได้อย่างง่ายดายโดยใช้ระดับพิเศษของ Div

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

การสาธิต: https://jsfiddle.net/soxv3vr0/

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

0

เพิ่มการขยาย: สืบทอดตำแหน่งที่แน่นอนของคุณ

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>

ขยายตัวอย่างข้อมูล

— ßãlãjî
แหล่งที่มา