CSS - div encima de otro

 
Vista:
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Alejandro (6 intervenciones) el 11/03/2020 09:28:52
buenos dias,

vereis tengo un problemilla con dos div, quiero se superponga uno encima de otro pero el segundo div se pone debajo y no se que hacer he probado de todo y nada. A continuacion os dejo el codigo CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.div1 {
 
	position:relative;
	visibility:hidden;
	vertical-align:baseline;
	margin-left:200px;
	padding:10px;
	z-index:0;
 
}
 
.div2 {
 
	position:relative;
	visibility:hidden;
	vertical-align:baseline;
	margin-left:200px;
	padding:10px;
	z-index:1;
 
 
}

La propiedad visibility está porque tengo un menu lateral que según pulses un boton sale los divs con formularios
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Xavi (33 intervenciones) el 11/03/2020 16:23:50
Hola Alejandro, como tienes el código HTML?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Alejandro (6 intervenciones) el 12/03/2020 08:11:32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
 
        <meta name="robots" content="noindex">
	      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style_propio.css" rel="stylesheet" type="text/css" />
        <script src="funcion_mostrar.js"></script>
 
        <title>Barrio empleo</title>
 
 
  </head>
 
  <body>
 
    <header class="headerindex">
 
      <div>
      <img src="imagenes/mancomunidad.png" class="imgmancomunidad"><h1>BARRIO EMPLEO</h1><img src="imagenes/barrioempleo.png" class="imgbarrioempleo">
      </div>
      <p style="text-align:center;"> <a  href="index.php">Volver</a></p>
 
    </header>
 
    <div class="verticalMenu">
        <a class="active">MENÚ EMPLEO</a>
        <a href="javascript:mostrarDatos()" id="datosPersonales">Datos personales</a>
        <a href="javascript:mostrarFormacion()" id="formacion">Formación</a>
        <a href="#">Ocupación</a>
        <a href="#">Situacion socioeconómica</a>
        <a href="#">Disponibilidad</a>
        <a href="#">Servicios demandados</a>
        <a href="#">Otros datos</a>
    </div>
    <?php
 
        session_start();
        include("conexion.php");
        $id=$_GET['id_personal'];
        $consulta="SELECT * FROM datos_personales WHERE id_personal=".$id;
        $resultado=mysqli_query($GLOBALS['conn'],$consulta);
        while($filas=mysqli_fetch_array($resultado)){
 
    ?>
 
    <div id="div1" class="div1">
 
        <p>
            <h3>DNI/NIE</h3>
 
        <?php
        if($filas['dni']){
 
            echo"<label>Tipo Doc.:</label><input type='text' readonly disabled value='DNI'>";
            echo "<label>Nº Doc.:</label><input readonly disabled type='text' value='".$filas['dni']."'>";
 
        }elseif($filas['nie']){
 
            echo "<label>Tipo Doc.:</label><input readonly disabled type='text'value='NIE'>";
            echo "<label>Nº Doc.:</label><input readonly disabled type='text' value='".$filas['nie']."'>";
 
        }else{
 
            echo "<label>Tipo Doc.:</label><input  type='text'value='--No se ha especificado--'>";
            echo "<label>Nº Doc.:</label><input  type='text' value='--No se ha especificado--'>";
 
 
        }
        ?>
 
        <label> F.nacimiento</label> <input type="text" readonly disabled value="<?php echo $filas['fecha_nacimiento']?>">
 
        </p>
        <hr>
        <p>
            <h3>Contacto</h3>
 
            <label>Teléfono móvil:</label><input type="text" readonly disabled value="<?php echo $filas['telefono_movil']?>"><label>Teléfono casa:</label><input type="text" readonly disabled value="<?php echo $filas['telefono_casa']?>">
            <label>Correo electrónico</label><input type="text" readonly disabled value="<?php echo $filas['email']?>">
        </p>
 
 
        <hr>
        <form method="post" action="validardatosEmpleo.php?id_personal=<?php echo $filas['id_personal'] ?>" enctype="multipart/form-data">
        <p>
        <label>Situación actual:</label>
        <select name="situacionActual">
            <option selected>--No seleccionado--</option>
            <option>Desempleado</option>
            <option>Primer empleo</option>
            <option>Contratado</option>
            <option>Baja médica</option>
            <option>No localizado</option>
            <option >Estudiando</option>
            <option >Jubilado</option>
            <option >Pensionista</option>
            <option >Mejora de empleo</option>
            <option >Baja técnica</option>
        </select>
        </p>
        <p>
        <label>Discapacidad:</label><span>Si<input type="radio" name="discapacidad" value="si"></span><span>No<input type="radio" name="discapacidad" value="no" checked></span>
        <label>Tipo:</label><input type="text" name="tipoDiscapacidad">
        <label>Grado:</label><input type="text" name="gradoDiscapacidad"><br><br>
        <label>Adjuntar documentación discapacidad:</label> <input type="file" name="docDiscapacidad">
        </p>
        <p>
        <input type="submit" value="Subir datos">
 
        </p>
        </form>
 
        </div>
        <div id="div2" class="div2">
 
            <form method="post" action="validardatosEmpleo.php?id_personal=<?php echo $filas['id_personal'] ?>" enctype="multipart/form-data">
                <label>Formación reglada</label><input type="text" name="formacionReglada">
            </form>
 
        </div>
 
 
 
    <?php
        }
        mysqli_free_result($resultado);
    ?>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Alejandro (6 intervenciones) el 13/03/2020 09:35:21
he probado y me sigue saliendo el div debajo del otro no encima
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por joel (252 intervenciones) el 13/03/2020 14:53:45
Como lo has probado Alejandro??
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por ScriptShow (125 intervenciones) el 18/03/2020 10:51:12
Saludos,

puedes intentarlo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
#div1 {
position:absolute;
visibility:visible;
vertical-align:baseline;
margin-left:200px;
padding:10px;
z-index:0;
}
 
#div2 {
position:absolute;
visibility:visible;
vertical-align:baseline;
margin-left:200px;
padding:10px;
z-index:1;
}
</style>
 
<div id="div1">D I V 1</div>
<div id="div2">D I V 2</div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Alejandro (6 intervenciones) el 23/03/2020 12:09:46
funciona!!!!! muchas gracias crack ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Alejandro (6 intervenciones) el 24/03/2020 09:13:08
otra cuestion, como podria hacer para que cuando le de al boton que acciona un div se oculte el resto de div, que no quede por encima solamente sino que desaparezca el anterior, lo he estado intentando con display pero nada
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por ScriptShow (125 intervenciones) el 24/03/2020 21:41:17
Saludos,

veamos algo adaptable:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
#div1 {
position:absolute;
visibility:hidden;
vertical-align:baseline;
border:2px solid #000000;
margin-left:200px;
padding:24px;
}
#div2 {
position:absolute;
visibility:hidden;
vertical-align:baseline;
border:2px solid #000000;
margin-left:200px;
padding:24px;
}
</style>
 
<script type="text/javascript">
var p=null;
function toggle(e) {
if (p != null) document.getElementById(p).style.visibility="hidden";
p=e;
document.getElementById(e).style.visibility="visible";
}
</script>
 
<input type="button" value="Div 1" onclick="toggle('div1')">
<input type="button" value="Div 2" onclick="toggle('div2')">
 
<div id="div1">D I V 1</div>
<div id="div2">D I V 2</div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar
sin imagen de perfil
Val: 13
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

div encima de otro

Publicado por Alejandro (6 intervenciones) el 25/03/2020 10:37:40
funciona perfecto, muchas gracias crack ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar