Cómo posicionar un elemento verticalmente fijo y horizontalmente absoluto

Problema:

Un usuario busca crear un botón que mantiene una distancia vertical fija desde la ventana gráfica y al mismo tiempo permanece a una distancia específica desde el borde derecho de un div, independientemente de la ventana gráfica tamaño.

Solución:

Posicionamiento horizontal:

Si bien el posicionamiento "horizontal absoluto" no se puede lograr técnicamente con el solución, se puede cumplir el objetivo de mantener una distancia fija desde el borde derecho del div. Al evitar establecer las propiedades izquierda o derecha para el elemento fijo horizontalmente, los divs del contenedor se utilizan para controlar su posición horizontal.

Posicionamiento vertical:

El elemento está posicionado fijado verticalmente usando la posición: propiedad fija. Al establecer un valor superior, la posición vertical se mantiene independientemente del tamaño de la ventana gráfica.

Ejemplo de código:

El siguiente código demuestra la implementación:

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

Consideraciones clave:

• El div div.positioner puede no ser necesario si el div div.inflow tiene un ancho fijo, lo que permite la configuración directa de margen izquierdo del elemento fijo.
• La configuración de desbordamiento: oculto en el div contenedor no afecta la posición del elemento fijo fuera de su límites.