CSS from One Div is showing up on Another Div. How to contain the CSS within the Div?

I am trying to understand how I can contain a CSS from one div from not starting over another div.
For example here is my HTML and CSS and JS:

<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>

#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)

As you can see I have here to separate divs: blueBackground and divTwo.

The problem I am seeing is that my CSS from divTwo is somehow starting on from blueBackground div. Here is a snap shot: example 1.

I want the CSS for #blue_square to only apply within the divTwo not outside of it. Why is the “blue sqaure” diagram starting on blueBackground and not from within divTwo? I am trying to make it to look like this: example 2