Flutuar certo e posição absoluta não funcionam juntos

126

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:rightnão funciona, minha div está sempre à esquerda da div pai. Como posso movê-lo para a direita?

trbaphong
fonte

Respostas:

294

Usar

position:absolute; right: 0;

Não há necessidade de float:rightposicionamento absoluto

Além disso, verifique se o elemento pai está definido como position:relative;

eivers88
fonte
se uma div desejar no centro do elemento pai, como posso fazer isso?
trbaphong
Obrigado pela ajuda. Eu uso left:50%e margin-left:-??px(?? depender da sua largura div)
trbaphong
Com a resposta de @ eivers88, ainda preciso remover 'overflow-y: auto;' do elemento pai para fazê-lo funcionar.
22414 Angelokh
que se a largura da div é dinâmico
Muhammad Umer
2
Ok, eu entendi esse float: right não é necessário para o posicionamento absoluto, mas ... E quando você tem dois elementos absolutos dentro do mesmo pai (posição: relativo) e deseja que eles estejam alinhados à direita, um ao lado do outro? Sua largura é dinâmico ...
spuas
26

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 a position:absolutepropriedade, porque position: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á-lo position: absolute; right: 0;, mas isso fará com que o elemento apareça sempre na borda direita da tela, independentemente da largura do pai div(portanto, ele será ' estar "à direita do div principal").

Edward
fonte
3
Se o pai divfor position: relative, isso divseria posicionado à direita desse pai, em vez da tela.
trysis
3

Você pode usar " translateX (-100%) " e " text-align: right " se o seu elemento absoluto for " display: inline-block "

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Você alinhará o elemento absoluto à direita em relação ao pai

Alexander Ivashchenko
fonte
2

Talvez você deva dividir seu conteúdo dessa maneira usando floats:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

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êiner divpara ter um overflow: auto(ou overflow: 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 .

cereallarceny
fonte
0

Consegui posicionar absolutamente um elemento flutuante à direita com uma camada de aninhamento e uma margem complicada:

function test() {
  document.getElementById("box").classList.toggle("hide");
}
.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}
<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

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

Adam Katz
fonte