it-swarm.com.ru

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

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

143
Web_Designer

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

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

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

Пример

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

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

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

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

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

17
jeteon

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

Никакие пустышки не нужны. 

2
Bekim Bacaj

Для меня данные решения не сработали нормально. Я хочу видеть 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
Reiner

У @Bekim Bacaj был идеальный ответ для меня, хотя это может быть не совсем то, что искал ОП (хотя его вопрос оставляет место для интерпретации). При этом Беким не привел пример. 

<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
John T.