我试图在divTwo div中设置#blue_square的高度。我使用jquery计算高度：

$("#blue_square").css("top", $(window).height() / 2 - 90)

此代码在大屏幕上工作（如桌面），但在较小的屏幕上（如笔记本电脑，平板电脑，移动的）此代码不工作。
我看到的问题是，我的divTwo的blue_square CSS不知何故从blueBackground div开始。下面是一个快照：example 1
我希望#blue_square的CSS只适用于divTwo内部，而不是外部。为什么“blue squaure”图从blueBackground开始，而不是从divTwo内部开始？我试着让它看起来像这样：example 2。
我在想我错估了#blue_square的高度。有办法解决吗？

<div class="blueBackground"></div>

<div class="divTwo">
    <div class="col-md-12 col-sm-10">   
        <div id="blue_square" style="top: 310px;"></div>
    </div>   
</div>

.divTwo{
    position: relative;
}

#blue_square{
    position: fixed;
    right: 0;
    z-index: 9;
    width: 370px;
    box-shadow: 0 0 6px transparent;
}

$("#blue_square").css("top", $(window).height() / 2 - 90)