Bootstrap Make Divs Superponer -- ss campo con twitter-bootstrap campo con responsive camp Relacionados El problema

bootstrap make divs overlap


0
vote

problema

Español

Estoy tratando de lograr por debajo del diseño utilizando Bootstrap. Soy capaz de hacerlo de lo contrario, pero el problema se produce en pantallas pequeñas donde la caja del medio más (más pequeña) no aparecerá donde debería ser, sube. Así que quiero intentarlo usar bootstrap. Ingrese la descripción de la imagen aquí

Original en ingles

I am trying to achieve below layout using bootstrap. I am able to do it otherwise but problem occurs on small screens where the middle most box(smallest one) will not appear where it should be, it goes up. so want to try using bootstrap.enter image description here

        
     
     

Lista de respuestas

1
 
vote

¿Qué tal esta solución? He hecho pocos cambios en su código.

Por favor, mira con cuidado

Demo

  * {      margin: 0;      padding: 0;      box-sizing: border-box;      border: 0.5px solid black;  }    .top-cover {      width: 100%;      height: 300px;      background-image: url('IMG_0044.JPG');      background-size: cover;      background-position: center;  }    .main-cover {      width: 90%;      position: relative;      height: 700px;      left: 5%;      top: -60px;      z-index: 1;      background-color: brown;      border: solid 5px green;  }    #dp {      width: 20%;      position: absolute;      left: 40%;      top: -10%;      z-index: 2;      display: none;  }    .dp-pic {      width: 20vw;   min-width: 75px;   max-width: 150px;       position: absolute;      left: 40%;      top: -8%;        }  
  <div class="top-cover">    </div>    <div class="main-cover">      <div id="dp"></div>      <img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">      </div>   
 

how about this solution. I have made few changes in your code.

please have look carefully

DEMO

* {      margin: 0;      padding: 0;      box-sizing: border-box;      border: 0.5px solid black;  }    .top-cover {      width: 100%;      height: 300px;      background-image: url('IMG_0044.JPG');      background-size: cover;      background-position: center;  }    .main-cover {      width: 90%;      position: relative;      height: 700px;      left: 5%;      top: -60px;      z-index: 1;      background-color: brown;      border: solid 5px green;  }    #dp {      width: 20%;      position: absolute;      left: 40%;      top: -10%;      z-index: 2;      display: none;  }    .dp-pic {      width: 20vw;   min-width: 75px;   max-width: 150px;       position: absolute;      left: 40%;      top: -8%;        }
<div class="top-cover">    </div>    <div class="main-cover">      <div id="dp"></div>      <img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">      </div>
 
 
1
 
vote

Siguiendo debe generar su diseño deseado. Agregue fronteras u otros estilos de lujo como desee.

  body {    margin: 0;    padding: 0;  }    .top-cover {    width: 100%;    height: 300px;    background: #eee;  }    .main-cover {    width: 90%;    height: 700px;    position: relative;    margin: -60px auto 0;    z-index: 1;    background-color: brown;    }    #dp {    width: 20%;    position: absolute;    left: 50%;    margin: -10% 0 0 -10%;    z-index: 2;  }    .dp-pic {    width: 100%;  }  
  <div class="top-cover">    </div>  <div class="main-cover">    <div id="dp">      <img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">    </div>  </div>  
 

Following should generate your desired layout. Add borders or other fancy styles as you want.

body {    margin: 0;    padding: 0;  }    .top-cover {    width: 100%;    height: 300px;    background: #eee;  }    .main-cover {    width: 90%;    height: 700px;    position: relative;    margin: -60px auto 0;    z-index: 1;    background-color: brown;    }    #dp {    width: 20%;    position: absolute;    left: 50%;    margin: -10% 0 0 -10%;    z-index: 2;  }    .dp-pic {    width: 100%;  }
<div class="top-cover">    </div>  <div class="main-cover">    <div id="dp">      <img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">    </div>  </div>
 
 

Relacionados problema

0  Diseño de ancho fijo automático para la pantalla de ancho  ( Auto fit fixed width layout to screen width ) 
Tengo un sitio web con un diseño de ancho fijo, y eso no se puede cambiar fácilmente. Su ancho es de alrededor de 1300px, por lo que no se hace bien en una pa...

-1  Barra de navegación con logo en bootstrap  ( Nav bar with logo in bootstrap ) 
Soy nuevo en Bootstrap. Estoy desarrollando una página de respuesta con la ayuda de Bootstrap. Estoy enfrentando a las issuses con la barra de navegación (pos...

0  Apilando las células en una mesa por parejas en el diseño receptivo  ( Stacking cells in a table by pairs in responsive layout ) 
Muchos ejemplos muestran cómo apilar las células una en una en un diseño sensible (es suficiente para aplicar la pantalla: bloque a todas las celdas). ¿Qué pa...

0  HTML Fondo de video Ajuste al tamaño de la pantalla que responde  ( Html background video adjust to screen size that is responsive ) 
Tengo un problema relacionado con mi video de fondo HTML. Encontré algunos artículos sobre el desbordamiento de la pila, y lo agregué a mi HTML y CSS. Pero no...

0  Sitio web que muestra la vista móvil correctamente cuando se accede localmente, pero incorrecta cuando se accede en el servidor  ( Website displaying mobile view correctly when accessed locally but incorrect wh ) 
La página web no muestra la vista móvil correctamente cuando se accede a través del servidor. Pero acceder a él localmente en mi PC, está bien. Estoy tratan...

0  Bootstrap CSS Fondo-Posición no funciona en dispositivos móviles  ( Bootstrap css background position not working on mobile devices ) 
Gracias por rodar conmigo en mi primera pregunta. Estoy aprendiendo bootstrap a medida que voy (soy un diseñador que está aprendiendo código), mucha prueba y ...

0  Diseño web receptivo: ¿Cómo obtener una imagen de encabezado para que sea totalmente sensible al reiniciar el navegador de la ventana?  ( Responsive web design how to get header image to be fully responsive when re si ) 
Estoy usando consultas de medios para alinear correctamente la imagen del encabezado en el contenedor DIV por debajo de él. Se ve genial cuando se encuentra e...

-3  creando un menú receptivo  ( Creating a responsive menu ) 
Esperemos que alguien pueda ayudar. He estado tratando de crear un menú simple que responde. Tengo el siguiente código aquí <nav class="menu"> <ul class="a...

1  ¿Cómo cambiar el tamaño en mi imagen de arranque?  ( How to change the size on my bootstrapped image ) 
Oye, chicos, así que estoy trabajando en un sitio web, pero he notado la imagen debajo de mi encabezado de sostenibilidad es demasiado pequeño, por lo que est...

0  ¿Puede la misma función comportarse de manera diferente en dispositivos móviles y de escritorio?  ( Can same function behave differently in mobile and desktop ) 
Estaba viendo un sitio web, es decir, sitio web Si le da Pincode y Búsqueda, Se le proporcionará un listado. Cuando haga clic en cualquier listado, la secci...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos