Como posicionar um elemento verticalmente fixo e horizontalmente absoluto

Problema:

Um usuário busca criar um botão que mantém uma distância vertical fixa da janela de visualização, ao mesmo tempo que permanece a uma distância específica da borda direita de um div, independentemente da janela de visualização size.

Solução:

Posicionamento horizontal:

Embora o posicionamento "horizontal absoluto" não seja tecnicamente alcançável com o fornecido solução, o objetivo de manter uma distância fixa da borda direita do div pode ser alcançado. Ao evitar definir as propriedades esquerda ou direita para o elemento fixado horizontalmente, os divs do contêiner são usados ​​para controlar sua posição horizontal.

Posicionamento vertical:

O elemento é posicionado fixado verticalmente usando a propriedade position:fixed. Ao definir um valor superior, o posicionamento vertical é mantido independentemente do tamanho da janela de visualização.

Amostra de código:

O código a seguir demonstra a implementação:

HTML:

CSS:

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
div.positioner {position: absolute; right: 0;}
div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

Principais considerações:

• O div.positioner div pode não ser necessário se o div.inflow div tiver uma largura fixa, permitindo a configuração direta de a margem esquerda do elemento fixo.
• Definir overflow: hidden na div do contêiner não afeta o posicionamento do elemento fixo fora de seus limites.