Here, the overlapping issue does not occur.
I have detailed my problem with overlapping above and I aim to achieve consistent visuals.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.buttonProperty{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
float:right;
margin-right:20px;
}
.buttonProperty:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.auto-style2 {
height: 323px;
background-image:url('images/img.jpg');
background-size: 100% 100%;
filter: opacity(30%);
}
.tableProperty{
position:fixed;
}
.auto-style3 {
height: 154px;
}
</style>
</head>
<body style="height: 526px">
<form id="form1" runat="server">
<div class="auto-style3">
<table style="width: 100%;" class="tableProperty">
<tr>
<td>
<asp:Button ID="Button1" CssClass="buttonProperty" runat="server" Text="Button" /></td>
</tr>
<tr>
<td>
<asp:Button ID="Button2" CssClass="buttonProperty" align="right" runat="server" Text="Button" /></td>
</tr>
</table>
</div>
</form>
<div class="auto-style2">
</div>
<p>sfsd</p><br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
<br />
<p>sfsd</p>
<br />
<p>sfsd</p>
<br />
</body>
</html>