Move element out of scrolled div - html

Question

HTML:
<div class="shortList" id="unselShortList">
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
CSS:
#unselShortList {
background-color: red;
overflow: scroll;
height: 150px;
position: relative;
}
#submit {
position: absolute;
}
jsfiddle: http://jsfiddle.net/iyogesh/4sxNg/
'OK' Hyperlink is coming inside div.
How can I move 'OK' link out of scrolled div and show it after div using CSS without changing html structure?

Answer 1

Check this fiddle
add a parent element
<div id="unselShortList">
<div class="shortList" >
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
</div>
CSS
#unselShortList {
position: relative;
padding-bottom:31px;
}
.shortList{
height: 150px;
background-color: #33cccc;
overflow: scroll;
margin-bottom:25px;
}
#submit {
position: absolute;
}
#SubmitValue{
position:absolute;
bottom:0;
}

Answer 2

Simple answer:
You CANT
(unfortunately)
Because you've specified overflow on the parent container, you cannot position child content outside of its limits. You can see the effect of this here (without) vs here (with)
In this case you will need to implement a change in your HTML, or look at other styling options- such as overlaying the button in the top right of the div or using javascript to reposition/add an element into the DOM

Answer 3

try:
#submit {
position: fixed;
}