HTML - menu desplegable se esconde detras de imagenes

 
Vista:

menu desplegable se esconde detras de imagenes

Publicado por juan (3 intervenciones) el 19/11/2020 22:16:17
ya tengo varios dias intentando arreglar este error, pero parece ser que no funciona nada de lo que hago :(

codigo HTML

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
<main class="main-slider">
   <div class="titulo">
   <h1 >La Mejor Imagen & Sonido A Tu Alcance</h1>
   </div>
   <hr class="tit">
<div class="container-all">
    <input type="radio" id="1" name="image-slide" hidden/>
    <input type="radio" id="2" name="image-slide" hidden/>
    <input type="radio" id="3" name="image-slide" hidden/>
    <input type="radio" id="4" name="image-slide" hidden/>
    <input type="radio" id="5" name="image-slide" hidden/>
 
 
    <div class="slide">
        <div class="imagen-select">
            <img src="fotos2/1-10.jpg">
        </div>
        <div class="imagen-select">
            <img src="fotos2/1-1.jpg">
        </div>
        <div class="imagen-select">
            <img src="fotos2/1-2.jpg"><!--party-3-->
        </div>
        <div class="imagen-select">
            <img src="fotos2/1-3.jpg">
        </div>
        <div class="imagen-select">
            <img src="fotos2/1-8.jpg">
        </div>
    </div>
 
    <div class="BOTON-SELECT"><!--pagination-->
 
        <label class="boton-item" for="1"><!--item-pagination-->
 
        </label>
 
        <label class="boton-item" for="2">
 
        </label>
 
        <label class="boton-item" for="3">
 
        </label>
 
        <label class="boton-item" for="4">
 
        </label>
 
        <label class="boton-item" for="5">
 
        </label>
    </div>

codigo CSS

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
.main-slider .container-all .slide img{
    max-width: 120%;
    width: 100%;
    max-height:550px; /*ajustar imagenes a 500 px de altura*/
    opacity: .9;
    margin: -15px auto;/*ajuste de imagen para añadir las letras*/
 
}
.main-slider{
    width: 110%;
    max-width: 1240px;/*estaba en 1200px*/
    margin: 5px auto 10px auto;/*estaba en 10px al principio*/
    background: #2C2220;
    padding: 10px;/*estaba en 15*/
    box-shadow: 0px 2px 5px rgba(0,0,0,0,75);
}
.main-slider .container-all{
    position: relative;
    max-width: 1200px;
    max-height: 550px;/*no estaba decidir*/
    width: 100%;
    border-radius: 6px;
    overflow:hidden;
}
.slide{
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
    animation-name: autoplay;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.imagen-select{
    position: relative;
    display: flex;
    flex-direction:column;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 100%;
}
.BOTON-SELECT{
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.boton-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid white;
    width: 16px;
    height: 16px;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 10px;
    text-align: center;
    transition: all 300ms;
}
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

menu desplegable se esconde detras de imagenes

Publicado por juan (1 intervención) el 19/11/2020 22:34:30
dejo el link para que puedan observar el error

https://sonidobits.000webhostapp.com/css/SOng2020-12.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
Imágen de perfil de joel
Val: 1.220
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

menu desplegable se esconde detras de imagenes

Publicado por joel (338 intervenciones) el 20/11/2020 07:59:45
Hola Juan, no se ver exactamente cual es el problema... lo puedes explicar?
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

menu desplegable se esconde detras de imagenes

Publicado por juan (3 intervenciones) el 20/11/2020 22:51:16
Claro que si joel, mira el problema y error que tengo

Es cuando el usuario va bajando para ver el contenido

y supongamos que estas en el contenido abajo del slider y cuando vas hacia arriba el menu

desplegable aparece detras del slider cuando tendria que estar el menu enfrente de el slider
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: 1.220
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

menu desplegable se esconde detras de imagenes

Publicado por joel (338 intervenciones) el 21/11/2020 20:40:38
Ah... ahora lo veo...

Lo que tienes que hacer, es poner el menu por encima...
Añade la estilo: header
1
z-index: 1000;

Así, te quedara encima de todo.
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

menu desplegable se esconde detras de imagenes

Publicado por juan (3 intervenciones) el 21/11/2020 21:57:58
el z-index lo pondria en la parte del menu verdad, deja lo checo y verifico que funcione, gracias por tu ayuda y tiempo juan
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

menu desplegable se esconde detras de imagenes

Publicado por juan (1 intervención) el 21/11/2020 22:03:08
WOW joel eres un crack si se logro acomodar el menu,

trate varios dias y no lo podia arreglar ,

incluso si utilice el z-index pero en el slider unicamente.

me imagino que ya tienes experiencia en estos errores o ya eres senior en programming
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: 1.220
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

menu desplegable se esconde detras de imagenes

Publicado por joel (338 intervenciones) el 22/11/2020 13:22:10
Me alegro que te haya servido!!! Gracias por comentarlo!!!
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