Eu quero que uma div esteja sempre à direita da div pai, então eu uso float:right
. Funciona.
Mas também quero que ele não afete outro conteúdo quando inserido, então eu o uso position:absolute
.
Agora float:right
não funciona, minha div está sempre à esquerda da div pai. Como posso movê-lo para a direita?
left:50%
emargin-left:-??px
(?? depender da sua largura div)De um modo geral,
float
é uma declaração de posicionamento relativo, pois especifica a posição do elemento em relação ao seu contêiner pai (flutuando para a direita ou esquerda). Isso significa que é incompatível com aposition:absolute
propriedade, porqueposition:absolute
é uma declaração de posicionamento absoluta. Você pode flutuar um elemento e permitir que o navegador o posicione em relação ao contêiner pai ou pode especificar uma posição absoluta e forçar o elemento a aparecer em uma determinada posição, independentemente de seu pai. Se você deseja que um elemento absolutamente posicionado apareça no lado direito da tela, você pode usá-loposition: absolute; right: 0;
, mas isso fará com que o elemento apareça sempre na borda direita da tela, independentemente da largura do paidiv
(portanto, ele será ' estar "à direita do div principal").fonte
div
forposition: relative
, issodiv
seria posicionado à direita desse pai, em vez da tela.Você pode usar " translateX (-100%) " e " text-align: right " se o seu elemento absoluto for " display: inline-block "
Você alinhará o elemento absoluto à direita em relação ao pai
fonte
Talvez você deva dividir seu conteúdo dessa maneira usando floats:
Observe o seguinte
overflow: auto;
, para garantir que você tenha alguma altura para o seu contêiner. As coisas flutuantes as tiram do DOM, para garantir que seus elementos abaixo não se sobreponham aos carros alegóricos errantes, configure um contêinerdiv
para ter umoverflow: auto
(ouoverflow: hidden
) para garantir que os carros alegóricos sejam contabilizados ao desenhar sua altura. Confira mais informações sobre carros alegóricos e como usá-los aqui .fonte
Consegui posicionar absolutamente um elemento flutuante à direita com uma camada de aninhamento e uma margem complicada:
Decidi tornar isso alternável para que você possa ver como ele não afeta o fluxo do texto ao redor (execute-o e pressione o botão para mostrar / ocultar a caixa absoluta flutuante).
fonte