Относительное расположение элемента, не занимающего места в потоке документов

Как я могу относительно позиционировать элемент, и он не занимает места в потоке документов?

6 131
html css css-position positioning

6 ответов:

то, что вы пытаетесь сделать, звучит как абсолютное позиционирование. С другой стороны, вы можете, однако, сделать псевдо-относительный элемент, создав элемент нулевой ширины, нулевой высоты, относительно расположенный, по существу, исключительно с целью создания опорной точки для положения, и абсолютно расположенный элемент внутри этого:

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

добавьте поле, равное пикселям, которые вы переместили:

пример

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

от чтения немного, кажется, вы можете абсолютное положение элемента до тех пор, как родительский элемент относительно позиционируется. Это означает, что если у вас есть CSS:

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

тогда дочерний элемент не будет занимать никакого места в потоке документов вообще. Затем вы можете расположить его с помощью одного из свойств" слева"," снизу " и т. д. Относительное расположение на родителе обычно не должно влиять на него, потому что он будет расположен в исходном положении по умолчанию, если вы этого не сделаете указать "левый", "нижний" и т. д.

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

15

вы просто взять этот элемент из потока документа position: absolute, и оставить это точка разрыва свободно перемещаться с динамическим потоком контента по не задание left top right и bottom свойства стиля, которые заставят его использовать относительную конечную точку потока динамически. Таким образом, абсолютно позиционированный элемент будет следовать за потоком документов, удаляясь от занимаемого пространства.

никакие фиктивные завертчицы не необходимы.

2

для меня данные решения не работали нормально. Я хочу видеть h3, чем текст и после этого Bootstrap-панели, вертикальные-синхронные с этими панелями я хочу видеть другие панели с правой стороны,

мне удалось это с высотой: 0 обертка и после этого положение:относительное;слева: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>
0

@Bekim Bacaj имел идеальный ответ для меня, хотя это может быть не совсем то, что искал 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)
0