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

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

요소를 상대적으로 배치하고 문서 흐름에서 공간을 차지하지 않도록 하려면 어떻게 해야 합니까?

당신이 하려는 일은 절대적인 위치 결정처럼 들립니다.그러나 기본적으로 위치에 대한 기준점과 절대 위치에 대한 요소를 만드는 목적으로만 폭이 0이고 높이가 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;
}

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

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

설정을 통해 문서 흐름에서 해당 요소를 제거할 수 있습니다.position: absolute그리고 그것은 콘텐츠의 동적 흐름으로 자유롭게 이동하는 중단점을 남깁니다.left top right그리고.bottom흐름의 상대 끝점을 동적으로 사용하도록 강제하는 스타일 속성.이렇게 하면 절대적으로 위치한 요소가 공간을 차지하지 않는 동안 문서 흐름을 따릅니다.

더미 포장지가 필요하지 않습니다.

@비킴 바카즈는 OP가 찾던 것이 정확히 아닐 수도 있지만(그의 질문은 해석의 여지를 남기기는 하지만) 나에게 완벽한 답을 주었습니다.그렇긴 하지만, 베킴은 예시를 제공하지 않았습니다.

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

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

저는 이것을 높이: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>

언급URL : https://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow