문서 흐름에서 공간을 차지하지 않고 요소를 상대적으로 배치

요소를 상대적으로 배치하고 문서 흐름에서 공간을 차지하지 않는 방법은 무엇입니까?

당신이하려는 것은 절대 위치와 같은 소리입니다. 반면에, 본질적으로 위치에 대한 기준점을 생성 할 목적으로 만 너비가 0 인 높이에 상대적으로 배치 된 요소를 생성하여 의사 관련 요소를 만들고 절대 위치 요소를 만들 수 있습니다. 그 안에 :

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

그러면 자식 요소는 문서 흐름에서 공간을 전혀 차지하지 않습니다. 그런 다음 "left", "bottom"등의 속성 중 하나를 사용하여 배치 할 수 있습니다. "left", "bottom"등을 지정하지 않으면 기본적으로 원래 위치에 배치되므로 부모의 상대 위치는 일반적으로 영향을 미치지 않습니다.

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

을 설정하여 해당 요소를 문서 플로우에서 간단히 가져 와서 position: absolute플로우의 상대 엔드 포인트를 동적으로 사용하도록 강제하는 스타일 특성 및 스타일을 지정 하지 않으면 컨텐츠의 동적 플로우와 함께 중단 점이 자유롭게 이동합니다 . 이런 식으로 절대 위치 요소는 문서 흐름을 따르면서 공간을 차지하지 않습니다.left top rightbottom

더미 래퍼가 필요하지 않습니다.

나에게 주어진 해결책은 잘 작동하지 않았다. 텍스트보다 h3를보고 싶습니다.이 패널과 수직으로 동기화 된 부트 스트랩 패널 이후 오른쪽에 다른 패널을보고 싶습니다.

나는 이것을 height : 0 래퍼로 관리하고 그 위치 후에 : 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)