How to unblock a nested div that has .block() applied

I want to be able to "unblock" a div that has had .block() applied to it. How can I do this?

Here is some code to be more clear.

<div id='outer' style="width:300;height:300;background-color:black">
<div id= 'inner'>
    <a href=#>I want to be able to click this </a>
</div>

But nothing else in the "outer" div. <button> 
</div>

<script>
$('#outer').block();
</script>

jQuery BlockUI adds an overlay inside of the element when it is blocked. For example:

<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.6; cursor: wait; position: absolute; background-color: rgb(0, 0, 0);"></div>

Therefore if you want one of the elements to be unblocked, you would need to increase the z-index of it so that it appears above the BlockUI overlay.

You could add a class to the element:

Example Here

.unblockable {
    z-index: 55555;
    position: relative;
}