Bir öğeyi belge akışında yer kaplamadan göreli olarak konumlandırma

Bir öğeyi nasıl nispeten konumlandırabilirim ve belge akışında yer kaplamaz mı?

Yapmaya çalıştığınız şey mutlak konumlandırma gibi geliyor. Öte yandan, esasen yalnızca konum için bir referans noktası ve kesinlikle konumlandırılmış bir eleman oluşturmak amacıyla sıfır genişlik, sıfır yükseklik, nispeten konumlandırılmış bir eleman oluşturarak sözde göreceli bir eleman yapabilirsiniz. bunun içinde:

<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>

Taşıdığınız piksele eşit bir kenar boşluğu ekleyin:

Misal

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

Biraz okurken, üst öğe nispeten konumlandırıldığı sürece bir öğeyi mutlak konumlandırabilirsiniz. Bu, CSS'niz varsa:

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

Alt öğe, belge akışında hiç yer kaplamaz. Daha sonra "sol", "alt" vb. Özelliklerden birini kullanarak konumlandırabilirsiniz. Ebeveyn üzerindeki göreceli konumlandırma genellikle onu etkilememelidir, çünkü "sol", "alt" vb. Belirtmezseniz varsayılan olarak orijinal konumuna yerleştirilir.

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

Sadece ayarıyla belge akışının kapalı o öğeyi almak position: absoluteve içeriğin dinamik akışıyla serbestçe 's kırılma noktası hareketini terk değil belirterek left top rightve bottomdinamik akışının göreceli uç noktasını kullanmak için zorlama olacaktır stil özelliklerini. Bu şekilde, kesinlikle konumlandırılmış öğe, alandan kendini kaldırırken belge akışını izler.

Sahte paketlere gerek yoktur.

Benim için verilen çözümler işe yaramadı. Metinden daha fazla bir h3 görmek istiyorum ve bundan sonra bu panellerle dikey senkronize Bootstrap panelleri sağ tarafta diğer panelleri görmek istiyorum,

Bunu bir height: 0 sarıcısıyla ve bu konumdan sonra: göreceli; sol: 100% ile başardım.

<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'nin tam olarak aradığı şey olmasa da (sorusu yorum için yer bırakmasına rağmen) benim için mükemmel bir cevaba sahipti. Bununla birlikte, Bekim bir örnek vermedi.

<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>

Yukarıdaki örnek, ...

• saf ve basit CSS kullanır ve başka hiçbir şey kullanmaz
• akışta olduğu gibi dikey olarak konumlandırılmıştır (varsayılan topayar)
• sayfanın sağ kenarına yatay olarak yerleştirilmiş ( right: 0)
• yer kaplamaz, ancak sayfa ilerledikçe doğal olarak hareket eder ( position: absolute)