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

ฉันจะจัดวางองค์ประกอบและไม่ใช้พื้นที่ในผังเอกสารได้อย่างไร

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

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>

เพิ่มระยะขอบเท่ากับพิกเซลที่คุณย้าย:

ตัวอย่าง

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}

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

.parent { 
    position: relative; 
}
.parent > .child {
    position: absolute;
}

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

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

คุณเพียงแค่ลบองค์ประกอบนั้นออกจากการไหลของเอกสารโดยการตั้งค่าposition: absoluteและปล่อยให้จุดแตกหักย้ายได้อย่างอิสระด้วยการไหลแบบไดนามิกของเนื้อหาโดยไม่ระบุคุณสมบัติleft top rightและbottomสไตล์ซึ่งจะบังคับให้ใช้จุดปลายทางสัมพัทธ์ของการไหลแบบไดนามิก วิธีนี้องค์ประกอบตำแหน่งที่แน่นอนจะติดตามผังเอกสารในขณะที่ลบตัวเองจากการใช้พื้นที่

ไม่จำเป็นต้องใช้อุปกรณ์ห่อหุ้ม

สำหรับฉันการแก้ปัญหาที่กำหนดไม่ได้ผล ฉันต้องการเห็น h3 มากกว่าข้อความและหลังจากนั้น Bootstrap-panels แนวตั้งตรงกับแผงนี้ฉันต้องการที่จะเห็นแผงอื่น ๆ ทางด้านขวา

ฉันจัดการสิ่งนี้ด้วยความสูง: 0 wrapper และหลังจากนั้นตำแหน่ง: relative; left: 100%

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row">
        <div class="col-md-9">
            <div class="col-md-12">
                <h3> hello </h3>
            </div>
            <div class="col-md-12">
                <span> whats up? </span>
            </div>
            <div style="height:0" class="col-md-12">
                <div style="left:100%" class="col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel2 title</h3>
                    </div>
                    <div class="panel-body">
                        <p>Panel Body</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3">
            <!--placeholder-->
        </div>

    </div>
</div>

@Bekim Bacaj มีคำตอบที่สมบูรณ์แบบสำหรับฉันแม้ว่ามันอาจจะไม่ใช่สิ่งที่ OP ต้องการ (แม้ว่าคำถามของเขาจะมีพื้นที่สำหรับการตีความ) ที่ถูกกล่าวว่า Bekim ไม่ได้ให้ตัวอย่าง

<h1>Beneath this...</h1>
<style>
    .HoverRight {
        background: yellow;
        position: absolute;
        right: 0;
    }
</style>
<div class="HoverRight">Stuff and Things!</div>
<p>but, top = same as this paragraph.</p>

ตัวอย่างข้างต้นตั้งค่าองค์ประกอบที่ ...

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