Remove From My Forums

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" />&nbsp;&nbsp; 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" />&nbsp;&nbsp; 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

Answered by:

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

Question

Answers