Custom Checkbox / Radio design oddity

Ok so I'm hoping by borrowing some other eyes maybe someone can point out my folly as I shake the rust off my css.

I created some custom Checkbox and Radio designs to use in a Windows Store App I'm working on (might also mention the UI framework is Ionic) :

jsFiddle here

Which work as expected in the JSFiddle example provided above, where you can see the original component radio and checkbox behind the new ones. They accept the click/touch as expected and everything is kosher.

However, when I put it into the app, then the output puts the actual component in the middle of the screen like this;

Which puts the actual hit area outside of the design and renders it pretty useless to it's purpose.

You might notice the first part of my css has the opacity at 1, but in reality it should be 0 so only the custom design displays.

.my-checkbox, .my-radio {
    opacity: 1;
    position: absolute;   
}

(keep in mind, Windows Store HTML Apps are basically subjected to being displayed in a mutated version of IE9)

So my question would be, why in the #$%& does it put the actual element in the middle of the screen? What am I missing here? I've played with the positions etc, and no joy so I must just be ready for the weekend but I'd gladly take a serving of humble pie to fix it.

Thanks for lending me your eyes. :)