css - outline - w3s box




Posicionamento absoluto ignorando o preenchimento do pai (5)

1.) você não pode usar borda grande no pai - no caso de você querer ter uma borda específica

2.) você não pode adicionar margem - caso seu pai faça parte de algum outro contêiner e você queira que seu pai ocupe toda a largura daquele pai / mãe.

A única solução que deve ser aplicável é envolver seus filhos em outro recipiente para que seus pais se tornem avós e, em seguida, aplique o preenchimento ao novo Wrapper / Parent das crianças. Ou você pode aplicar diretamente preenchimento para as crianças.

No seu caso:

.css-sux{
  padding: 0px 10px 10px 10px;
}

Como você faz um elemento de posicionamento absoluto honrar o preenchimento de seu pai? Eu quero uma div interior para esticar a largura de seu pai e ser posicionado na parte inferior do pai, basicamente um rodapé. Mas a criança tem que honrar o preenchimento do pai e não está fazendo isso. A criança é pressionada contra a borda do pai.

Então eu quero isso:

mas estou entendendo isso:

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

Eu posso fazer isso acontecer com uma margem em torno do div interno, mas eu prefiro não ter que adicionar isso.


Aqui está o meu melhor tiro para isso. Eu adicionei outro Div e tornei vermelho e mudei a altura do seu pai para 200px apenas para testá-lo. A ideia é que a criança agora se torne neta e o pai se torne o avô. Então o pai respeita seu pai. Espero que você tenha a minha ideia.

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

Editar:

Eu acho que o que você está tentando fazer não pode ser feito. Posição absoluta significa que você vai dar a ela coordenadas que devem honrar. E se o pai tiver um preenchimento de 5px. E você absolutamente posiciona a criança no topo: -5px; esquerda: -5px . Como é suposto homenagear os pais e você ao mesmo tempo?

Minha solução

Se você quer que ele honre o pai, não o posicione absolutamente então.


Poderia ter feito facilmente usando um nível extra de Div.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Demonstração: https://jsfiddle.net/soxv3vr0/


Primeiro, vamos ver porque isso está acontecendo.

A razão é que, surpreendentemente, quando uma caixa tem position: absolute sua caixa contendo é a caixa de preenchimento do pai (ou seja, a caixa ao redor de seu preenchimento). Isso é surpreendente porque geralmente (isto é, quando usando posicionamento estático ou relativo) a caixa contendo é a caixa de conteúdo do pai.

Aqui está a parte relevante da especificação CSS :

No caso em que o ancestral é um elemento em linha, o bloco que o contém é a caixa delimitadora em torno das caixas de preenchimento da primeira e última caixa em linha gerada para esse elemento .... Caso contrário, o bloco de contenção é formado pela borda de preenchimento do elemento. o ancestral.

A abordagem mais simples - como sugerido na resposta de Winter - é usar padding: inherit na div absoluta posição. Ele só funciona, porém, se você não quiser que o div posicionamento absoluto tenha qualquer preenchimento adicional próprio. Eu acho que as soluções mais gerais (em que ambos os elementos podem ter seu próprio preenchimento independente) são:

  1. Adicione um div extra relativamente posicionado (sem acolchoamento) ao redor do div absolutamente posicionado. Esse novo div respeitará o preenchimento de seu pai, e o div absolutamente posicionado irá preenchê-lo.

    A desvantagem, claro, é que você está mexendo com o HTML simplesmente para fins de apresentação.

  2. Repita o preenchimento (ou adicione a ele) no elemento absolutamente posicionado.

    A desvantagem aqui é que você tem que repetir os valores no seu CSS, o que é frágil se você está escrevendo o CSS diretamente. No entanto, se você estiver usando uma ferramenta de pré-processamento como SASS ou LESS poderá evitar esse problema usando uma variável. Este é o método que eu pessoalmente uso.






css-position