divs button hover mouse not behaving correctly - html

Question

I have three main main div in a main div and each these three div have small button at the bottom, because they look and feel is same so i have same class "readMore_button" for all three of them is styling them in css. now the button from first block behave fines with hover but rest of two not (mouse has to be very at bottom of div button to behave). I cant figure out why!!
many thanks in advance.
<div id="HighLight_blocks_Wrapper">
<div class="highlight_Block" id="Management_block_01">
<div class="highLight_block_label">Management</div>
<div class="readMore_button">Read More</div>
</div>
<div class="highlight_Block" id="valuation_block_01">
<div class="highLight_block_label">Valuation</div>
<div class="readMore_button">Read More</div>
</div>
<div class="highlight_Block" id="SelectGreen_block_01">
<div class="highLight_block_label">Select Green</div>
<div class="readMore_button">Read More</div>
</div>
</div>
css
#HighLight_blocks_Wrapper {
position: relative;
width: 100%;
height: 400px;
margin-top: 10px;
}
.highlight_Block {
position: relative;
float: left;
width: 321px;
height: 370px;
margin-left: 15px;
margin-top: 15px;
background-color: #F5F5F5;
border: solid;
border-width: 1px;
border-color: #E8E8E8;
}
.readMore_button {
width: 75px;
height: 26px;
position: absolute;
right: 10px;
bottom: 10px;
background-color: grey;
background: url("/assets/Images/view_more_01.png") no-repeat;
}
.readMore_button a {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica;
font-size: 13px;
color: #464444;
margin-left: 6px;
line-height: 26px;
text-decoration: none;
}
.readMore_button:hover {
background: url("/assets/Images/view_more_02.png") no-repeat;
}
.readMore_button:hover a {
color: #fff;
}

Answer 1

I am using squarespace CMS and i am using content block in each of them, issue has arises-ed because of that.
<squarespace:block-field id="BlockField_Management" class="BlockField_02" columns="10"/>
this line creates many div blocks and i have notice through web inspector that in 2nd and 3rd some of div are over-lapping read more button, that is why mouse hover is not behaving correctly.
Solution use z-index to .readMore_button class.
.readMore_button {
width:75px;
height:26px;
position:absolute;
right:10px;
bottom:10px;
background-color:grey;
background:url("/assets/Images/view_more_01.png") no-repeat;
z-index:100;
}