Quiero colocar un <div> más de un <img>.

El HTML, tiene este aspecto.

CSS:

body {
  background-color: #cCa;
}

.image {
  position: relative;
  background-repeat: no-repeat;
}

.content {
  background-color: lightGrey;
  position: absolute;
  overflow: none;
  left: 40px;
  top: 40px;
}

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
      <div class="image"> <img src="css_js/img/image.jpg"> </div>
      <div class="content img-circle">[content]</div>
    </div>
  </div>
</div>

Más info con fotos:

cuando el tamaño del navegador es grande

Cómo colocar un elemento sobre otro elemento?

cuando el navegador es de pequeño tamaño.

Cómo colocar un elemento sobre otro elemento?

  • Intenta usando css z-index?
  • posibles duplicados de como lugar ul sobre la img (de respuesta)?
  • La pregunta era solo 5 horas de edad! También, si su pregunta no está recibiendo la atención que usted quiere tratar de editarlo para hacerlo más claro, volver a colocar la misma pregunta está fuertemente mal visto
  • Esta es otra manera de hacerlo: jsfiddle.net/h46KA/1

1 Comentario

  1. 41

    Pruebe a establecer el z-index de la propiedad de los contenidos div superior de la imagen, como esta:

    .content{
        z-index: 3;
    }

    Esto hará que el contenido div estará por encima de la imagen. Para que se haga más grande a medida que el navegador se hace más pequeño, usted va a necesitar para el uso de media queries. Estas son las etiquetas que se incluyen en su cabeza que le permitirá cargar diferentes archivos CSS basado en el tamaño de la pantalla. Básicamente, usted sólo debe tener mayores opciones de fuente para los archivos CSS cargado cuando la pantalla es más pequeña. Si usted está familiarizado con los medios de comunicación de consultas, este es un buen lugar para leer sobre ellos: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Buena suerte!

    ACTUALIZACIÓN:

    Basa su comentario, usted debe cambiar su código para esto:

    <div class="span12">
        <div class="image"> 
            <img src="css_js/img/image.jpg"> 
            <div class="content img-circle">[content]</div>
        </div>
    </div>

    Esto se hace para que el img y .content son envueltos por la .image. A continuación, en el archivo CSS, añadir esta regla:

    .content{
        position: relative;
    }

    Esto va a cambiar la posición del contenido relativo a donde la imagen div se encuentra. Leer sobre el position propiedad para aprender a mover el .content alrededor. Usted todavía tendrá las consultas de medios para actualizar el tamaño y la posición de la div en respuesta al navegador de cambio de tamaño, aunque.

    • Quiero <div> se consumía a <imagen> y con redimensionar el tamaño del navegador, div cambiado de posición relativa a la posición de la imagen.
    • ok, pero hay una manera de utilizar bootstrap clases? «bootstrap framework css»
    • Yo sé lo bootstrap es, y no, no hay. Puede incluir el bootstrap responsive archivo css, pero eso no lo puedo hacer lo que quiera sin personalización, y es mucho más sencillo de hacer sus propias reglas css ahora de tratar de personalizar el bootstrap queridos

Dejar respuesta

Please enter your comment!
Please enter your name here