Transparent border test.

Testing if transparent borders are supported and how they affect absolutely positioned elements;

by heygrady

HTML

<div>
    <span></span>
    Positioning the red box in the top left corner won't overlap the blue border.
</div>
<div class="transparent">
    <span></span>
    The red box appears inset 10px because of the transparent border but it is actually positioned <code>top: 0;</code> and <code>left: 0;</code>.
</div>
<div class="transparent border-box">
    <span></span>
    Changing the <code>box-sizing</code> to <code>border-box</code> doesn't help at all.
</div>

CSS

div {
    float: left;
    position: relative;
    height: 130px;
    width: 130px;
    background-color: yellow;
    margin: 0 10px 10px 0;
    padding: 10px;
    border: 10px solid blue;
    /* border: 10px solid  transparent; */
}
div.transparent {
    border: 10px solid  transparent;
}
div.border-box {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
    height: 170px;
    width: 170px;
}
span {
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 10px;
    background-color: red;
}