[SOLUCIONADO] Position que no lo hace SOS

emilio_viguri · #1 (**permalink**) 22/06/2018, 09:45

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<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="archivos/estilo.css" rel="stylesheet" type="text/css">
<meta http-equiv="refresh" content="10">
<style type="text/css">
body{ 
    background:#CCC;
    padding:5px;
    color:#FFF;
}
#sbody{
    background-color:#00C;
    padding:5px;
}
header, nav, section, footer{
    position:relative;
    background-color: rgba(0,5,2,.9);;
    padding:10px;
    display:block;
}
#popup{
    position:fixed;
    top: 50px;
    display:inline-block;
    padding:30px;
    margin-left:0px;
    margin-right:0px;
    background:#FF0;
}
</style>
</head>
 
<body>
<div id="sbody">
<div id="popup">Hola</div>
    <header>header</header>
    <nav>nav</nav>
    <section>Ver mas información  section</section>
    <footer>footer</footer>
</div>
</body>
</html>

emilio_viguri · #2 (**permalink**) 22/06/2018, 11:20

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<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="archivos/estilo.css" rel="stylesheet" type="text/css">
<meta http-equiv="refresh" content="60">
<style type="text/css">
body{ 
    background:#CCC;
    padding:5px;
    color:#FFF;
}
header, nav, section, footer{
    position:relative;
    background-color: rgba(0,5,2,.9);;
    padding:10px;
    display:block;
    margin:2px;
}
#popup{
    position:absolute;
    top: 50px;
    left:0px;
    right:0px;
    display:inline-block;
    padding:30px;
    text-align:center;
    border: 1px thin #FF0;
}
#popcon{
    display:inline-block;
    background-color:#F00;
    padding:20px;
    border-radius:3px;
}
 
</style>
</head>
 
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>Ver mas información  section</section>
    <footer>footer</footer>
    <div id="popup">
     <div id="popcon">Hola PopUp</div>
</div>
</body>
</html>

emilio_viguri · #3 (**permalink**) 22/06/2018, 11:27

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).