Answered by:
Div element's position: fixed doesn't work right.

Question
-
User1769015664 posted
In the code below, the DIV element <div id="main"> will not scroll as intended when page is scrolled up and down. But, scrollin down moves the apge on top of the contents of <div id="main">.
What I really need is that everything above </hr> to stay on top of the page and everything below <hr> to scroll without affecting contents of <div id="main">
<style> #main { ; top: 0px; left: 0px; height: 110px; width: 691px; } </style> <body class = "body"> <form id="form2" class="body" runat="server" > <asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager> <h1 style="display: inline; color: white;"></h1> <div id="main"> <img alt="" src="images/MyLogo.png" /> My Test Site <button type="button" id="btn_Cust">Add Customer</button> <asp:Button ID="Button13" class="button" runat="server" Text="Upload Products" /> <asp:Label ID="Label1" runat="server" Text="User"></asp:Label> </div> <hr /> <div style='text-align:right; border:none'> <div></div> <div id ="SocialMedia_Images1" style="right: 0px;"> <a href="https://www.facebook.com/pages/Shame_on_FaceBook/119687538078795?sk=wall" > <img src="images/fb.jpg"/> </a> </div> </div> <div id="somediv"></div> <div class="container-fluid"> <div class="first"> <div class="row"> <div class="col-lg-4"> <div id="div1" class="nd-box"> <button id="Button14" class="button;" runat="server"> <span id="span5" runat="server">Button 1 </span> </button> <p id="p1" runat="server"> </p> <center> <button id="Button15" class="button" runat="server" onserverclick="View"> <span id="span7" runat="server">Open Customer</span></button> </center> </div> </div> <div class="col-lg-4"> <div id="div1A" class="nd-box"> <button id="Button16" class="button;" runat="server"> <span id="span8" runat="server">Button 2 </span> </button> <p id="p2" runat="server"> </p> <center> <button id="Button17" class="button" runat="server" onserverclick="View2"> <span id="span9" runat="server">Open Merchant</span></button> </center> </div> </div> <div class="col-lg-4"> <div id="nd-boxA" class="nd-box"> <button id="Button18" class="button; " runat="server"> <span id="span10" runat="server">Button 2A </span> </button> <p > <asp:Literal ID="Literal1" Mode="PassThrough" runat="server"></asp:Literal> </p> <center> <button id="Button19" class="button" runat="server" onserverclick="View3"> <span id="span11" runat="server">Open Manufacturer</span></button> </center> </div> </div>
Monday, September 28, 2020 4:47 AM
Answers
-
User1535942433 posted
Hi NJ2,
Accroding to your desciption and codes,I have created a test and the div main are on the top when scrolling but the content will cover the main.
You could use z-index on the div main.Just like this:
<script src="Scripts/jquery-3.4.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <style> #main { ; top: 0px; left: 0px; height: 110px; width:100%; z-index: 999; background-color:lightblue; } #content { margin-top:110px; overflow: hidden; } </style> <asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager> <h1 style="display: inline; color: white;"></h1> <div class="container"> <div id="main"> <img alt="" src="image/image6.jpg" /> My Test Site <button type="button" id="btn_Cust">Add Customer</button> <asp:Button ID="Button13" class="button" runat="server" Text="Upload Products" /> <asp:Label ID="Label1" runat="server" Text="User"></asp:Label> </div> <hr /> <div id="content"> <div style='text-align: right; border: none'> <div></div> <div id="SocialMedia_Images1" style="right: 0px;"> <a href="https://www.facebook.com/pages/Shame_on_FaceBook/119687538078795?sk=wall"> <img src="image/image6.jpg" /> </a> </div> </div> <div id="somediv"></div> <div class="first"> <div class="row"> <div class="col-lg-4"> <div id="div1" class="nd-box"> <button id="Button14" class="button;" runat="server"> <span id="span5" runat="server">Button 1 </span> </button> <p id="p1" runat="server"> </p> <center> <button id="Button15" class="button" runat="server"> <span id="span7" runat="server">Open Customer</span></button> </center> </div> </div> <div class="col-lg-4"> <div id="div1A" class="nd-box"> <button id="Button16" class="button;" runat="server"> <span id="span8" runat="server">Button 2 </span> </button> <p id="p2" runat="server"> </p> <center> <button id="Button17" class="button" runat="server"> <span id="span9" runat="server">Open Merchant</span></button> </center> </div> </div> <div class="col-lg-4"> <div id="nd-boxA" class="nd-box"> <button id="Button18" class="button; " runat="server"> <span id="span10" runat="server">Button 2A </span> </button> <p> <asp:Literal ID="Literal1" Mode="PassThrough" runat="server"></asp:Literal> </p> <center> <button id="Button19" class="button" runat="server"> <span id="span11" runat="server">Open Manufacturer</span></button> </center> </div> </div> </div> </div> </div> </div>
Best regards,
Yijing Sun
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, September 29, 2020 5:45 AM