Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Position que no lo hace SOS

Estas en el tema de Position que no lo hace SOS en el foro de CSS en Foros del Web. Bueno quiero ver quien me saca de mi duda por que no entiendo que pasa, se supone que en este código pongo una ventana sobre ...
  #1 (permalink)  
Antiguo 22/06/2018, 09:45
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 97
Antigüedad: 8 años, 2 meses
Puntos: 3
Busqueda Position que no lo hace SOS

Bueno quiero ver quien me saca de mi duda por que no entiendo que pasa, se supone que en este código pongo una ventana sobre otra para hacer un popup pero los position no me queda me lo coloca abajo pero no se por que ni como ponerlo sobre todo que hago mal o que esta mal.


<body> para fondo texto por defecto
<div id="sbody"> Para crea un padre para los popup y otras cosas
<div id="popup"> Crear una mensaje enésima de todo para mostrar un aviso
<header> Para cave sera
<nav> Menus
<section>Contenidos
<footer>Pies de pagina

Código HTML:
Ver original
  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>Documento sin título</title>
  4. <link href="archivos/estilo.css" rel="stylesheet" type="text/css">
  5. <meta http-equiv="refresh" content="10">
  6. <style type="text/css">
  7. body{
  8.     background:#CCC;
  9.     padding:5px;
  10.     color:#FFF;
  11. }
  12. #sbody{
  13.     background-color:#00C;
  14.     padding:5px;
  15. }
  16. header, nav, section, footer{
  17.     position:relative;
  18.     background-color: rgba(0,5,2,.9);;
  19.     padding:10px;
  20.     display:block;
  21. }
  22. #popup{
  23.     position:fixed;
  24.     top: 50px;
  25.     display:inline-block;
  26.     padding:30px;
  27.     margin-left:0px;
  28.     margin-right:0px;
  29.     background:#FF0;
  30. }
  31. </head>
  32.  
  33. <div id="sbody">
  34. <div id="popup">Hola</div>
  35.     <header>header</header>
  36.     <nav>nav</nav>
  37.     <section>Ver mas información  section</section>
  38.     <footer>footer</footer>
  39. </div>
  40. </body>
  41. </html>
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.
  #2 (permalink)  
Antiguo 22/06/2018, 11:20
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 97
Antigüedad: 8 años, 2 meses
Puntos: 3
Respuesta: Position que no lo hace SOS

Bueno ya lo solucione al parecer según yo y por lo que vi afecta el orden de cascada en que se meten por a si decir si meto 3 div el orden de prioridad de div a mostrar disminuye seria
div 1 prioridad 0
div 2 prioridad 1
div 3 prioridad 3

Donde div 3 tiene mas prioridad y se mostraría sobre todo y de hay iria 3.2 etc creo yo are pruebas...

Código HTML:
Ver original
  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>Documento sin título</title>
  4. <link href="archivos/estilo.css" rel="stylesheet" type="text/css">
  5. <meta http-equiv="refresh" content="60">
  6. <style type="text/css">
  7. body{
  8.     background:#CCC;
  9.     padding:5px;
  10.     color:#FFF;
  11. }
  12. header, nav, section, footer{
  13.     position:relative;
  14.     background-color: rgba(0,5,2,.9);;
  15.     padding:10px;
  16.     display:block;
  17.     margin:2px;
  18. }
  19. #popup{
  20.     position:absolute;
  21.     top: 50px;
  22.     left:0px;
  23.     right:0px;
  24.     display:inline-block;
  25.     padding:30px;
  26.     text-align:center;
  27.     border: 1px thin #FF0;
  28. }
  29. #popcon{
  30.     display:inline-block;
  31.     background-color:#F00;
  32.     padding:20px;
  33.     border-radius:3px;
  34. }
  35.  
  36. </head>
  37.  
  38.     <header>header</header>
  39.     <nav>nav</nav>
  40.     <section>Ver mas información  section</section>
  41.     <footer>footer</footer>
  42.     <div id="popup">
  43.      <div id="popcon">Hola PopUp</div>
  44. </div>
  45. </body>
  46. </html>
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.
  #3 (permalink)  
Antiguo 22/06/2018, 11:27
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 97
Antigüedad: 8 años, 2 meses
Puntos: 3
Sonrisa Respuesta: Position que no lo hace SOS

bueno lo otro o pueden usar la opcion z-index

Definición y Uso

La z-indexpropiedad especifica el orden de apilamiento de un elemento.

Un elemento con mayor orden de apilamiento está siempre en frente de un elemento con un orden de apilamiento inferior.

Nota: z-index sólo funciona en elementos posicionados (posición: absoluta, la posición: relativa, o posición: fijo).
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.

Etiquetas: display, html, position, sos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:53.