Hola
calizman, no discuto tu solución porque está claro que está bien, mas interpreto diferente al problema.
Para mi que
gfjoseluis al decir "sacar al div del contenido" hizo referencia a quitarlo del contenedor principal de la maqueta. De ser así, le será útil trabajar con posicion absoluta.
digamos:
html
Código:
<body>
<div id="contenedor">aquí todo el contenido del sitio</div>
<div class="image"></div>
</body>
css
Código:
*{margin:0; padding:0; position:relative;}
body{text-align:center;}
#contenedor{width: ... ; margin:0 auto; text-align:left; z-index: ... ;}
.image{
position:absolute;
left:50%;
margin-left:-500px;
width: ... ; height: ... ;
z-index: ... ;}
Aplicamos left: /*valor que necesites*/ ; y margin-left: /*valor que necesites*/ ; para dejar "fijo" (no fixed eh XD ) al div absoluto en relación al eje horizontal, tambíen podríamos haberlo echo respecto del eje vertical (con top y margin-top). Con esto logramos que nuestro div que quedó "suelto" (ya que no depende de #contenedor) mantenga una posición única y no se nos mueva según resolución.
Luego con z-index damos el orden de pila que necesitemos según el diseño que tengamos.
Hasta aquí mi granito de arena, espero sea útil. un abrazo
