Positioning Experiment

HTML

<div class="outter">
    <div class="inner" style="top: 0; left: 0;"></div>
    <div class="inner" style="top: 0; right: 0;"></div>
    <div class="inner" style="bottom: 0; left: 0;"></div>
    <div class="inner" style="bottom: 0; right: 0;"></div>
</div>
<div class="outter">
    <div class="middle-top-left">
        <div class="inner" style="bottom: 0; right: 0;"></div>
    </div>
    <div class="middle-bottom-right">
        <div class="inner" style="top: 0; left: 0;"></div>
    </div>
    <div class="middle-top-right">
        <div class="inner" style="bottom: 0; left: 0;"></div>
    </div>
    <div class="middle-bottom-left">
        <div class="inner" style="top: 0; right: 0;"></div>
    </div>
</div>

Very good! Compliment! Just insert a random jsfiddle tag :D

CSS

.outter {
    margin: 50px;
    width: 100px;
    height: 100px;
    border: 2px dashed #cccccc;
    position: relative;
    float: left;
}
.inner {
    width: 30px;
    height: 30px;
    border: 2px solid #666666;
    position: absolute;
}
.middle-top-left, 
.middle-bottom-right,
.middle-top-right,
.middle-bottom-left
{
    position: absolute;
    width: 0;
    height: 0;
}
.middle-top-left { top: 0; left: 0; }
.middle-bottom-right { bottom: 0; right: 0; }
.middle-top-right { top: 0; right: 0; }
.middle-bottom-left { bottom: 0; left: 0; }