Colocar la chincheta (absolute)

Profesores:JAB y Ester Torres
Posicionamiento absoluto
Para colocar cualquier cosa en una posición concreta y exacta de nuestra página tenemos que tener en cuenta tres aspectos:
  1. Esa cosa a colocar no puede estar por ahí suelta, tiene que estar dentro de una caja (div).
  2. Ese div tiene que tener un posicionamiento absoluto (position:absolute).
  3. Esa caja (div) tiene que estar dentro de otra caja (div o similar) que tiene que tener un posicionamiento relativo (position:relative).

Siguiendo estos pasos, primero creamos el <div> que contendrá la imagen de la chincheta y como tendrá que ir dentro de otra caja, la vamos a crear al final (dentro) de nuestro <section>.
<!doctype html>
<html>

  <head> ... </head>

  <body>
     <div id="franja"></div>
     <header> ... </header>
     <nav> ... </nav>

   <section id="contenido">
 	 <div id="titulo"> ... </div>

 	 <article id="cuadro1" class="cuadros">
 	       ... 
 	 </article>

 	 <article id="cuadro2" class="cuadros">
 	       ... 
 	 </article>

 	 <article id="cuadro3" class="cuadros">
 	       ... 
 	 </article>
 	 <div id="chincheta">
 	      <img src="img/chincheta.gif">
 	 </div>
   </section>

   <div id="franja_final"></div>
   <footer> ... </footer>
 </body>
</html>
Hemos abreviado el código HTML (ya repetido íntegramente en el tema anterior) con "..." para no extender demasiado el ejemplo.

Antes de cerrar el </section> creamos un <div...> con la imagen de la chincheta en su interior.

Y por último, añadimos el correspondiente código CSS:
estilos.css
#chincheta{
   position:absolute;
   left:227px;
   top:-49px;
}

section{
   position:relative;
   display:inline-block;
   margin-bottom:45px;
   font-family:inder;
   font-size:12px;
}
Mientras que con el primer selector (#chincheta) colocamos el div de la chincheta en unas coordenadas concretas con un posicionamiento absoluto, en el segundo (section) añadimos un posicionamiento relativo de la caja que contiene al div de la chincheta.