Estoy tratando de dar una posición fija al siguiente div. Pero cuando agrego position: fixed a css, el elemento simplemente desaparece. Cualquier sugerencia será apreciada. ¡Gracias!

Victoria

Web y código a continuación

http://vtwg.eu/ZMT/untitled3.html

<div id="book-now">
<a href="mailto:musictours@zzkrecords.com?subject=Music_Tours"><img 
src="book_now.png" alt="" width="90"></img></a>
</div>


#book-now{

background-image: url("back_2.png");
background-repeat: repeat;
text-align: right;
padding-right: 60px;
padding-top: 40px;
}
0
Victoria G. 26 abr. 2017 a las 23:26

3 respuestas

La mejor respuesta

Los elementos fijos son fixed en el navegador. Debe definir dónde desea que se repare dando valores de sus propiedades top y right

  position:fixed;
  top: 100px;
  right: 100px;
0
Yash Yadav 26 abr. 2017 a las 20:39

Cuando usa position: fixed, es para la ventana del navegador. Debe poner el valor superior, izquierdo, derecho o inferior. Como:

#book-now{
    position: fixed;
    top: 50px;
    left: 50px;
    background-image: url("back_2.png");
    background-repeat: repeat;
    text-align: right;
    padding-right: 60px;
    padding-top: 40px;
}
0
Sleepyhead 26 abr. 2017 a las 20:52

Si un elemento tiene una posición fija, debe definir no solo su posición con la configuración de top o bottom y left o right (el valor predeterminado es la esquina superior izquierda del ventana), pero también width y height; de lo contrario, tendrá ancho y alto cero y, por lo tanto, permanecerá invisible.

Además: si hay configuraciones de posición para las cuatro configuraciones mencionadas (top, bottom, left y right), no necesita ancho y altura, ya que son definido por esas posiciones.

Un ejemplo:

.x {
    position: fixed;
    top: 60px;
    left: 100px;
    width: 160px;
    height: 120px;
    background-image: url("http://placehold.it/60x40/fa7");
    background-repeat: repeat;
    text-align: right;
    }
<div class="x"></div>

Y sin ajustes de ancho y alto (es decir, invisible):

.x {
    position: fixed;
    top: 60px;
    left: 100px;;
    background-image: url("http://placehold.it/60x40/fa7");
    background-repeat: repeat;
    text-align: right;
    }
<div class="x"></div>
0
Johannes 26 abr. 2017 a las 21:14