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


186

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


2
Это должно быть относительно позиционировано? Абсолютно позиционированные элементы удаляются из потока документов.
Джейсон Дженнаро

Ответы:


281

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

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

как бы вы унаследовали ширину в этом случае? поскольку относительная ширина div равна 0, абсолютный div не сможет правильно наследовать ширину, если они оба находятся в контейнере
Alex H

@AlexH К сожалению, этот метод не предлагает способ сделать это. В этом случае я бы посоветовал попробовать метод отрицательной позиции / отрицательной маржи FredK.
Nightfirecat

101

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

пример

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

5
почему-то имеет для меня больше смысла, чем другой ответ
markasoftware

2
Это работает? Я пытаюсь это в Chrome и, кажется, не работает. Я использую его для позиционирования кнопок навигации из slidesjs, так что это может быть связано и с этим.
Петруза

1
Я попробовал это с, left: -25px; margin-right: -25px;и он все еще смещает элементы родного брата по горизонтали на 2-3 пикселя по некоторым причинам.
Майк

Включите использование, float:right;когда вы хотите сделать это относительно правой части экрана, чтобы значения вправо или влево могли быть меньше и более управляемыми.
Дамиан Грин

имейте в виду, что для положительных top:значений необходимо, чтобы они margin-bottom:равнялись минусу высоты элемента, а не смещению
мистер Хилис

21

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

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

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

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


3

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

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


простой примерный код может помочь гораздо больше, чем чтение и понимание всей параграфы. Хотя концепция ясна
MR_AMDEV

0

Для меня данные решения не работали нормально. Я хочу видеть 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 был идеальный ответ для меня, хотя это может быть не совсем то, что искал ОП (хотя его вопрос оставляет место для интерпретации). При этом Беким не привел пример.

<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)
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.