Posicione de forma relativa um elemento sem ocupar espaço no fluxo de documentos

186

Como posso posicionar relativamente um elemento e não ocupar espaço no fluxo de documentos?

Web designer
fonte
2
Precisa estar relativamente posicionado? Elementos absolutamente posicionados são removidos do fluxo de documentos.
Jason Gennaro

Respostas:

281

O que você está tentando fazer parece um posicionamento absoluto. Por outro lado, você pode, no entanto, criar um elemento pseudo-relativo, criando um elemento relativamente posicionado com largura zero, altura zero, essencialmente apenas com a finalidade de criar um ponto de referência para a posição e um elemento absolutamente posicionado dentro disso:

<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>
Nightfirecat
fonte
como você herdaria a largura neste caso? desde que a largura div relativa é 0, o div absoluta não seria capaz de herdar a largura corretamente se os dois estão em um recipiente
Alex H
@AlexH Infelizmente, esse método não oferece uma maneira de fazer isso. Eu recomendaria tentar o método de posição negativa / margem negativa do FredK neste caso.
Nightfirecat
101

Adicione uma margem igual aos pixels que você moveu:

Exemplo

.box {
    position: relative;
    top: -30px; 
    margin-bottom: -30px;
}
Fred K
fonte
5
de alguma forma faz mais sentido para mim do que a outra resposta
markasoftware
2
Isto funciona? Estou tentando no chrome e parece não funcionar. Estou usando-o para posicionar os botões de navegação dos slidesjs, para que também possa mexer com ele.
Petruza
1
Eu tentei isso left: -25px; margin-right: -25px;e ainda compensa os elementos irmãos horizontalmente por 2-3 pixels por algum motivo.
20515 Mike
Inclua o uso de float:right;quando você quiser fazer isso em relação ao lado direito da tela, para que os valores da direita ou da esquerda possam ser menores e mais gerenciáveis.
Damian Green
tenha em mente para positivos top:valores que você precisa ter margin-bottom:igual ao menos da altura do elemento não o deslocamento
Sr. Heelis
21

Ao ler um pouco, parece que você pode posicionar um elemento em absoluto, desde que o elemento pai esteja relativamente posicionado. Isso significa que se você tiver o CSS:

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

O elemento filho não ocupará nenhum espaço no fluxo do documento. Você pode posicioná-lo usando uma das propriedades "esquerda", "inferior", etc. O posicionamento relativo no pai geralmente não deve afetá-lo, porque ele será posicionado na sua posição original por padrão se você não especificar "left", "bottom" etc.

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

jeteon
fonte
3

Você simplesmente retira esse elemento do fluxo do documento, definindo position: absolutee deixando seu ponto de interrupção se mover livremente com o fluxo dinâmico do conteúdo, não especificando as propriedades de estilo left top righte bottomque o forçarão a usar o ponto de extremidade relativo do fluxo dinamicamente. Dessa forma, o elemento absolutamente posicionado seguirá o fluxo do documento e evita que ocupe o espaço.

Não são necessários invólucros fictícios.

Bekim Bacaj
fonte
um simples exemplo de código pode ajudar muito mais, em vez de ler e entender toda a paragrah. Althought o conceito é claro
MR_AMDEV
0

Para mim, as soluções dadas não funcionaram bem. Eu quero ver um h3, que o texto e, depois disso, painéis de inicialização, sincronizados verticalmente com esses painéis, eu quero ver outros painéis no lado direito,

Eu consegui isso com uma altura: 0 wrapper e depois dessa posição: relativa; esquerda: 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>

Reiner
fonte
0

@Bekim Bacaj tinha a resposta perfeita para mim, mesmo que não seja exatamente o que o OP estava procurando (embora sua pergunta deixe espaço para interpretação). Dito isto, Bekim não forneceu um exemplo.

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

O exemplo acima configura um elemento que ...

  • usa CSS puro e simples e nada mais
  • está posicionado verticalmente como se estivesse no fluxo ( topconfiguração padrão )
  • está posicionado horizontalmente na borda direita da página ( right: 0)
  • não ocupa espaço, mas se move naturalmente à medida que a página rola ( position: absolute)
John T.
fonte