ลอยไปทางขวาและตำแหน่งสัมบูรณ์ไม่ทำงานร่วมกัน

ฉันต้องการ div จะเสมอที่ด้านขวาของ div float:rightแม่ของมันดังนั้นฉันใช้ มันได้ผล.

แต่ฉันยังต้องการให้มันไม่ส่งผลกระทบต่อเนื้อหาอื่น ๆ เมื่อแทรกดังนั้นฉันจึงใช้position:absolute.

ตอนนี้ใช้float:rightไม่ได้ div ของฉันจะอยู่ทางซ้ายของ div หลักเสมอ ฉันจะย้ายไปทางขวาได้อย่างไร?

ใช้

position:absolute; right: 0;

ไม่จำเป็นต้องfloat:rightมีตำแหน่งที่แน่นอน

ตรวจสอบให้แน่ใจว่าองค์ประกอบหลักถูกตั้งค่าเป็น position:relative;

โดยทั่วไปแล้วfloatเป็นคำสั่งการกำหนดตำแหน่งแบบสัมพัทธ์เนื่องจากระบุตำแหน่งขององค์ประกอบที่สัมพันธ์กับคอนเทนเนอร์หลัก (ลอยไปทางขวาหรือซ้าย) ซึ่งหมายความว่าไม่เข้ากันกับposition:absoluteคุณสมบัติเนื่องจากposition:absoluteเป็นคำสั่งกำหนดตำแหน่งที่แน่นอน คุณสามารถลอยองค์ประกอบและอนุญาตให้เบราว์เซอร์วางตำแหน่งโดยสัมพันธ์กับคอนเทนเนอร์หลักหรือคุณสามารถระบุตำแหน่งที่แน่นอนและบังคับให้องค์ประกอบปรากฏในตำแหน่งที่กำหนดโดยไม่คำนึงถึงระดับบนสุด หากคุณต้องการให้องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนปรากฏทางด้านขวาของหน้าจอคุณสามารถใช้ได้position: absolute; right: 0;แต่สิ่งนี้จะทำให้องค์ประกอบนั้นปรากฏที่ขอบด้านขวาของหน้าจอเสมอไม่ว่าพาเรนต์จะกว้างแค่ไหนdivก็ตาม (ดังนั้นจึงชนะ ' t เป็น "ที่ด้านขวาของ div ระดับบนสุด")

คุณสามารถใช้ " translateX (-100%) " และ " text-align: right " หากองค์ประกอบที่สมบูรณ์ของคุณคือ " display: inline-block "

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

คุณจะได้รับองค์ประกอบสัมบูรณ์ที่จัดแนวให้สัมพันธ์กับพาเรนต์

บางทีคุณควรแบ่งเนื้อหาของคุณเช่นโดยใช้การลอย:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

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

ฉันสามารถวางองค์ประกอบที่ลอยอยู่ด้านขวาได้อย่างแน่นอนด้วยการซ้อนชั้นเดียวและระยะขอบที่ยุ่งยาก:

function test() {
  document.getElementById("box").classList.toggle("hide");
}

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

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