Div debajo de otro

guzzano · #1 (**permalink**) 30/10/2014, 12:53

Buenos días, tengo un problema, quisiera poner este div blanco, debajo del cyan. Pero no sé como, discúlpenme, lo mio no es maquetar.

El CSS,

Código CSS:

Ver original@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 
*, body
{
    padding: 0px;
    margin:  0px;
    
    font-family: 'Open Sans', sans-serif;
}
 
html 
{
     background-color: #f0f0f0;
}
 
header 
{
    background-color: #3892e8;
    color: #fff;
    
    font-size: 12px;
    
    background-image: url('src/intertravel.png');
    background-position: left center;
    background-repeat: no-repeat;
    
    height: 80px;
    width: 100%;
    
 
}
 
#telefono_header
{
    padding-top: 9px;
    padding-left: 40px;
    
    top: 10px;
    right: 200px;
    
    position: relative;
    
    background-image: url(resource/ico-phone.png);
    background-repeat: no-repeat;
    
    height: 50px;
    
    float: right;
}
 
p.header_telefono
{
    font-size: 13px;
}
 
 
#caja_ultracompleta
{
    height: 900px;
}
 
#caja_completa
{
    box-sizing: border-box;
    margin: 0 auto;
    
    background-image: url('src/test.jpg');
    background-size: 100% 100%;
    
    width: 900px;
    height: 420px;
    
    padding-left: 30px;
    padding-right: 30px;
    
    border-top: 4px solid #48CEA8;
}
 
#caja_cotizacion
{
    background-color: #48CEA8;
    
    width: 250px;
    height: 500px;
    
    box-shadow: 15px 19px 163px -14px rgba(0, 0, 0, 1);
        -webkit-box-shadow: 15px 19px 163px -14px rgba(0, 0, 0, 1);
        -moz-box-shadow: 15px 19px 163px -14px rgba(0, 0, 0, 1);
    
    border: 2px solid #48CEA8;
    border-radius: 0px 0px 25px 0px;
 
}
 
h1.txt_cotizacon
{
    font-size: 25px;
    text-align: center;
    color: #fff;
}
 
#suscripcion 
{
    
    background-color: #fff;
    
    height: 100px;
    width: 400px;
}

Código HTML:

Ver original<!DOCTYPE html>
<html>
    
    <head>
        
        <title>InterTravel</title>
        
        <link rel = "stylesheet" type = "text/css" href = "main.css">
        <style type="text/css">
        #cotizacion {
}
        </style>
        <meta charset = "UTF-8">
        
    </head>
    
    <body>
        <header>
            
            <div id = "telefono_header">
                <p class = "header_telefono">0295 - 2693260/3260</p>
            </div>
            
        </header>
        <div id = "caja_ultracompleta">
            <div id = "caja_completa">
                <div id = "caja_cotizacion">
                    <h1 class = "txt_cotizacon">Cotización</h1>
                </div>
 
                <div id = "suscripcion">
                    asdadsadsadasdsadasdsadsiadjsaidjsaodjsaoidjoisaj
                </div>
            </div>
        </div>
        
</body>
</html>

¿Alguna idea?, aparte, cualquier recomendación, por favor, házmelo saber, se agradece.

Saludos.

GeekGirl · #2 (**permalink**) 30/10/2014, 13:17

No entiendo. En el código que pasaste, el div blanco sale justamente abajo del cyan. Si lo que querés es que el cyan salga abajo del blanco, simplemente ponelo por debajo en el código. Es eso lo que preguntás?

guzzano · #3 (**permalink**) 30/10/2014, 13:32

Buenos días, gracias. Quizás me expresé mal, no quiero que esté abajo, si no atrás del div Cyan.

Saludos.

RoyKeane · #4 (**permalink**) 30/10/2014, 13:45

Hay varias formas de hacerlo dependiendo de que contenga cada una o como se van a comportar, no queda muy claro.
Revisa la propiedad z-index.

GeekGirl · #5 (**permalink**) 30/10/2014, 14:28

Como bien te dijeron, se puede hacer con la propiedad z-index. Tenés que darle a los elementos algún tipo de posicionamiento (relativo, absoluto, etc según tus necesidades) y luego el z-index en base a lo que quieras que se muestre por arriba y qué por debajo (a mayor z-index, mayor jerarquía de display).

Te dejo un link con un ejemplo práctico para que te sea más claro: http://es.html.net/tutorials/css/lesson15.php

Saludos.