webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau/css/position.css

section.examples .example-box {
    background-color: #3268aa;
    border: 3px solid #88ff9c;
    height: 3rem;
    width: 3rem;
    border-radius: .3rem;
    margin: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}

section.examples .example-box.active {
    border: 3px solid #d73f3f;
}

.visual-example {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: .5rem;
}

#example1 .active {
    position: static;
    top: 1rem;
    left: 1rem;
}

#example2 .active {
    position: relative;
    top: 1rem;
    left: 1rem;
}

#example3 .active {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

#example4 .active {
    position: fixed;
    top: 1rem;
    left: 1rem;
}

#example5 {
    overflow: scroll;
}

#example5 .active {
    position: sticky;
    left: 1rem;
    right: 1rem;
}

#example5 .wrapper {
    display: flex;
    border: 2px solid #d73f3f;
}