Scroll To Fixed with Clickable Skin Need to Place Box Above Fixed

[khanz]

I have "scroll to fixed" working as we want it. I added the skinning we have been using. But, I need to place another small "300 x 100px ad box" above the 300 x 600 scrolling/fixed div. This smaller ad will scroll up out of view while the main 300 x 600px ad remains. Right now the smaller ad appears below.I can't get the smaller ad positioned.Appreciate any help,Here is the fiddle. http://jsfiddle.net/ZczEt/1006/and the .css\[code\]body { font-family: arial, sans-serif; margin: 0 auto 0; width: 970px; z-index:40;}body h1, h2 { font-weight: bold; font-size: 18px; margin-top: 12px;}body p { margin-top: 8px; font-size: 12px;}.banner { background-color: #aaa; height: 90px; padding: 1px 0 0 20px; width: 950px; z-index:40;}.header { background-color: #eee; height: 50px; padding: 20px; width: 930px; z-index:40;}.menu { background-color: #777; height: 30px; padding: 5px 20px 0px 20px; width: 930px; z-index:40;}.content { padding: 10px 0 10px 20px; z-index:40; width:950px;}.footer { background-color: #eee; height: 30px; padding: 0px 20px 0px 20px; width: 930px; z-index:40;}.footer-content { font-size:10; background-color: #aaa; padding: 10px 20px 5px 20px; width: 930px; margin-top:0px;}#left { width: 620px;}#right { width: 320px; margin-left: 0px; float:right;}.smallAd { width:300px; height:100px; background-color:red;}#fixedAd { border: 1px solid #dddddd; position: absolute; top: 230px; width: 300px; height:600px;}#fixedAd .title { border-bottom: 1px solid #dddddd; width: 100%; background-color: #dddddd; font-size: 12pt; font-weight: bold;}#fixedAd .contents { margin: 5px; font-size: 80%;}/*Site branding*/.floatRight { float:right;}.floatLeft { float:left;}#siteBranding { position: fixed; width: 100%; height: 750px; overflow: hidden; top: 0px; left: 0px; z-index: -1;}#brandCenter { margin-left:50%}#brandCenter2 { margin-left: -960px; width: 1920px}.right { float:right;}.left { float: left;}\[/code\]