40 lines
891 B
CSS
40 lines
891 B
CSS
|
/* POSITION
|
||
|
|
- static
|
||
|
|
- relative
|
||
|
|
- absolute
|
||
|
|
- fixed
|
||
|
|
Todos los elementos HTML tienen por defecto asignada la posicion "Static" */
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: arial, helvetica, sans-serif;
|
||
|
|
padding-bottom: 1200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#padre {
|
||
|
|
width: 600px;
|
||
|
|
height: 500px;
|
||
|
|
border: 4px solid #0CC;
|
||
|
|
margin: 20px auto;
|
||
|
|
padding: 20px;
|
||
|
|
position: relative; /* los elementos hijo dependen de la posicion del padre para tomar las coordenadas 0,0 */
|
||
|
|
}
|
||
|
|
|
||
|
|
#hijo {
|
||
|
|
text-align: center;
|
||
|
|
padding: 50px;
|
||
|
|
background: rgba(128,128,128,0.7);
|
||
|
|
font-size: 2em;
|
||
|
|
position: absolute; /*absolute, relative (si el padre es relative las coordenandas hijo parten del 0,0 del padre)*/
|
||
|
|
top: 150px;
|
||
|
|
left:150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fija {
|
||
|
|
text-align: center;
|
||
|
|
padding: 50px;
|
||
|
|
background: rgba(220,20,128,0.5);
|
||
|
|
font-size: 2em;
|
||
|
|
position: fixed; /*posicion fija, no se mueve*/
|
||
|
|
top: 50px;
|
||
|
|
right: 350;
|
||
|
|
}
|