JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<div class="absolute-margin">
    <div class="outer">
        <div class="inner">
            <div class="box"></div>                                         
        </div>
    </div>
</div>
<div class="relative-padding">
    <div class="outer">
        <div class="inner">
            <div class="box"></div>                                         
        </div>
    </div>
</div>

CSS

/*

Position absolute and minus margin-top

.inner - using position absolute
.box - using margin-top: -50px
*/
.absolute-margin {width: 500px; height: 500px;}
.absolute-margin .outer {width: 500px; height: 500px; background: green; position: relative;}
.absolute-margin .inner {width: 250px; height: 250px; background: blue; position: absolute; margin: 0 auto; top: 100px; left: 125px;}
.absolute-margin .box {width: 50px; height: 50px; background: red; position absolute; top:0; left: 0; margin-top: -50px}

/*
Position relative, downside...backgrounds :(

.inner - using position relative and padding top
.box - using margin-top: -50px
*/
.relative-padding {width: 500px; height: 500px;}
.relative-padding .outer {width: 500px; height: 500px; background: green; position: relative}
.relative-padding .inner {width: 250px; height: 250px; background: blue; position: relative; margin: 0 auto; padding-top: 50px;}
.relative-padding .box {width: 50px; height: 50px; background: red; position absolute; top:0; left: 0; top: 0; margin-top: -50px}