'ตำแหน่ง: สัมบูรณ์' ขัดแย้งกับ Flexbox หรือไม่

ฉันต้องการให้divไม้ติดที่ด้านบนของหน้าจอโดยไม่มีผลกระทบใด ๆ ต่อองค์ประกอบอื่น ๆ และองค์ประกอบลูกอยู่ตรงกลาง

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

เมื่อฉันเพิ่มposition: absoluteบรรทัดjustify-content: centerกลายเป็นไม่ถูกต้อง พวกเขาขัดแย้งกันหรือไม่และทางออกคืออะไร?

แก้ไข

ขอบคุณพวกมันเป็นปัญหาของความกว้างของผู้ปกครอง แต่ฉันอยู่ใน React Native ดังนั้นฉันจึงไม่สามารถตั้งค่าwidth: 100%ได้ พยายามflex: 1และalign-self: stretchทั้งสองไม่ทำงาน ฉันลงเอยด้วยการใช้Dimensionsเพื่อรับความกว้างเต็มของหน้าต่างและใช้งานได้

แก้ไข

ขณะที่รุ่นใหม่ตอบสนองพื้นเมือง (ฉันกับ 0.49) width: 100%ก็ยอมรับ

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

นั่นหมายความว่า

• หากคุณเพิ่มการวางตำแหน่งสัมบูรณ์ให้กับองค์ประกอบด้วยองค์ประกอบdisplay: inline-flexนั้นจะกลายเป็นระดับบล็อก (เช่นdisplay: flex) แต่จะยังคงสร้างบริบทการจัดรูปแบบแบบยืดหยุ่น

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

ที่กล่าวว่าอย่างการวางตำแหน่งของความขัดแย้งที่มีเด็กดิ้น

เนื่องจากไม่ไหลลื่นลูกที่อยู่ในตำแหน่งที่แน่นอนของคอนเทนเนอร์แบบยืดหยุ่นจะไม่เข้าร่วมในโครงร่างแบบยืดหยุ่น

คุณลืมความกว้างของผู้ปกครอง

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

คุณจะต้องให้width:100%ผู้ปกครองไปcenterข้อความ

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

หากคุณต้องการจัดกึ่งกลางในแนวตั้งให้height:100%และalign-itens: center

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

ในกรณีของฉันปัญหาคือฉันมีองค์ประกอบอื่นที่อยู่ตรงกลางของ div โดยมีดัชนี z ที่ขัดแย้งกัน

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>