Cómo superponer una imagen en una posición fija en un sitio web

Escrito por ruri ranbe | Traducido por walter f. stocco
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo superponer una imagen en una posición fija en un sitio web
Inserta "superposición" entre las comillas en el campo "id". (John Foxx/Stockbyte/Getty Images)

Las Cascading Style Sheets, o CSS, pueden definir la posición de una imagen en una página web. CSS utilizan el atributo "posición" para describir cómo se colocan los objetos en una página; los métodos de posicionamiento más comunes son estáticos, fijos, absolutos y relativos. Cuando una imagen está en posición fija, nunca se mueve de su ubicación en el sitio, incluso cuando el visitante despliega la ventana hacia arriba o hacia abajo. Puedes utilizar una combinación de HTML y CSS para fijar una imagen en cualquier parte de un sitio web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Añade "<style>" y "</ style>" entre las etiquetas "head" y "</ head>" en el código de la página, de modo que el HTML sea similar al siguiente:

    <head> <style> </style> </head>

  2. 2

    Añade ".overlay { }" entre las etiquetas "<style>" y "</style>", y luego añade "position: fixed;" entre las llaves curvadas:

    .overlay { position: fixed; }

  3. 3

    Introduce la ubicación deseada para la imagen que usa el atributo "izquierdo" y "superior". "Izquierdo" mueve la imagen hacia la derecha el número de píxeles específicos; "superior" mueve la imagen hacia abajo de la página el número de píxeles específicos. Por ejemplo:

    .overlay { position: fixed; top: 20px; left: 300px; }

  4. 4

    Añade la etiqueta "<img>" entre las etiquetas "<body>" y "</body>" para superponer la imagen en la página. Inserta el atributo "src" y "class" en la etiqueta "<img>":

    <img src="" class="">

  5. 5

    Introduce la URL de la imagen entre las comillas en el campo "src". Inserta "superposición" entre las comillas en el campo "id":

    <img src="http://my website/picture.jpg" class="overlay">

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles