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