JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div id="outmost">
    <section>
        <div id="fixed">
            <h1>I am fixed</h1>
            <div id="relative">
                I am relative, inside a fixed
                <div id="absolute">
                   I am absolute inside a relative that is inside a fixed
                </div>
            </div>
        </div>   
    </section>
    <section>        
        <div id="flowing">
            I should show up next, cause I have margin top 55px
            <div id="relative">
                I am relative so that my absolute child can be nicely positioned in relation to me. I am one part of the problem.
                <div id="absolute">
                    I am the problem child as I am in a relative parent and need to be absolute positioned in relation to my parent. I am the other part of the problem.
                </div>
            </div>
        </div>
    </section>
    <section>
        <div>
            I make sure things gets scrolled - and does layers above me cover me?
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
            I make sure things gets scrolled
            <br/><br/><br/>
        ...

CSS

div {
    float: left;
    margin: 3px;
    padding: 3px;
}
#outmost {
    width: 400px;
    border: 1px solid #000;
}
#fixed {
    background-color: #ccc;
    height: 50px;
    width: 386px;
    position: fixed;
    top: 6px;
    border: 1px solid #000;
    z-index: 1;
}
#flowing {
    margin-top: 65px;
    border: 1px solid #000;
}
#relative {
    position: relative;
    border: 1px solid #000;
}
#fixed #relative {
    float: right;
    top: -50px;
}
#absolute {
    position: absolute;
    background-color: #ddd;
    top: 39px;
    left: 220px;
    width: 150px;
    border: 1px solid #000;
}
#fixed #relative #absolute {
    top: 15px;
    left: 130px;
    z-index: 1000px;
}