@charset "utf-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body { font-family: 'trebuchet ms', sans-serif; }

main {
    width: 100%;
    max-width: 35em;
    margin: 0 auto;
    padding: 1em;
}

section {
    border: 1px solid #ccc;
    padding: 1em;
}

main > *,
section > * {
    margin-bottom: 1em;
}

div {
    background-color: rgba(255,200,200,.5);
    border: 1px solid rgba(128,0,0,.75);
    color: rgb(128,0,0);
    padding: 1em;
    text-align: center;  
}

p { background-color: white; }

/*
----------------------
propiedades css para
"superponer" etiquetas
----------------------
*/

main > div:first-of-type {
    position: relative;
    left: -4em;
}

section:first-of-type {
    position: relative;
}
section:first-of-type > div {
    position: absolute;
    
}

main > div:last-of-type {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

section:last-of-type > div {
    position: sticky;
    top: -1em;
}