Tengo un contenedor con mucho contenido y, por lo tanto, he configurado overflow: auto; para que se desplace.

También necesito un botón en la esquina inferior derecha de este contenedor en una posición fija (similar a un botón FAB en Diseño de materiales).

El botón está muy bien ubicado en la parte inferior derecha del contenedor. Desafortunadamente cuando desplazo el contenido, el botón se mueve con él. Mi comprensión del posicionamiento absoluto es que posicionará el elemento en relación con su padre (con position: relative;). Entonces, ¿por qué se mueve este botón? ¿Cuál es la forma correcta de arreglarlo a los padres?

El comportamiento esperado es que el botón permanece en la esquina inferior derecha, independientemente de la posición de desplazamiento. Para ver un ejemplo, consulte esta página y busque la frase "Animación de la barra de herramientas fuera de la pantalla durante el desplazamiento".

Tenga en cuenta que estoy buscando hacer que esto funcione con posicionamiento absoluto, no con posicionamiento fijo. El botón debe estar en la esquina inferior derecha de su contenedor, sin importar cuán profundamente esté anidado el contenedor en la ventana del navegador.

* { 
    box-sizing: border-box; 
}
.container {
    position: relative;
    overflow: auto;
    height: 256px;
    width: 256px;
    margin-right: 16px;
    border: solid 1px red;
    padding: 4px;
}
.fab {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;
    background-color: blue;
}
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
    <Button class="fab">
        Ok
    </Button>
</div>

Consulte mi JSFiddle aquí

1
Naresh 21 oct. 2017 a las 19:17

3 respuestas

La mejor respuesta

Finalmente descubrí cómo hacer esto. Como solo el texto debe desplazarse, debe estar dentro de su propio contenedor de desplazamiento. Esto hace que el botón se enganche a su padre sin verse afectado por el desplazamiento. Aquí está el código final.

* { box-sizing: border-box; }

.container {
    /* keep the add button in a fixed location relative to this container */
    position: relative;
    display: flex;
    flexDirection: column;
    height: 200px;
    width: 200px;
    margin-right: 16px;
    border: solid 1px red;
    padding: 4px;
}

.text-container {
    /* ensure that only the text scrolls, not the button */
    flex: 1;
    overflow: auto;
}

.fab {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;
    background-color: blue;
}
<div class="container">
    <div class="text-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.    
    </div>
    <Button class="fab">
        Ok
    </Button>
</div>
1
Naresh 21 oct. 2017 a las 19:40

Puede hacer esto agregando un contenedor div para el texto. El contenedor envolvente tendrá su ancho y altura establecidos en 100% y el desbordamiento establecido en automático, por lo que tendrá el cuadro de desplazamiento y su FAB se puede colocar dentro del div externo de la siguiente manera:

* {
  box-sizing: border-box;
}

.fab {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  float: left;
  margin-right: 16px;
}

.text-wrapper {
  overflow: auto;
  height: 100%;
  width: 100%
}
<div class="container">
  <div class="text-wrapper">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>

  <Button class="fab">
        Ok
    </Button>
</div>
1
Dale 21 oct. 2017 a las 19:05

Hay muchas formas de lograr esto, pero preferiría envolver el .container con un .container-parent de la misma altura y ancho, y position: relative. Esto le proporciona un elemento que no se desplaza para colocar el botón .fab.

<div class="container-parent">
  <div class="container">
    Lorem ipsum dolor sit amet...
  </div>
  <Button class="fab">
    Ok
  </Button>

</div>

Con CSS:

.container-parent {
  position: relative;
  height: 256px;
  width: 256px;
}

.fab {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

Aquí está el violín: http://jsfiddle.net/t702Lknz/4/

Alternativamente, puede usar su marcado original, con .fab tener una posición fija. El CSS sería como:

.fab {
    position: fixed;
    top: 225px;
    left: 190px;
}

Aquí está el violín para eso: http://jsfiddle.net/t702Lknz/3/

1
Nisarg 21 oct. 2017 a las 16:31