h5滚动屏幕之后,绝对定位位置不在页面最底部

Posted 2023-04-15

参考技术A 百度知道
css实现div悬浮层，始终停留在浏览器的最下方，不随...展开
查看全部1个回答
好学者百科
百度认证:北京惠企网络技术有限公司官方帐号
关注
成为第13983位粉丝
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建一个div，同时设置其class属性为con,主要用于下面通过该类名进行样式的设置。
3、在test.html文件内，在div内使用p标签创建一段测试文字的显示。
4、在test.html文件内，在div内，再使用div标签创建一个类名为ff的div，用于作为悬浮的div。
5、在test.html文件内，在css标签内，使用“*”初始化元素样式，设置外边距和内边距都为0。同时，设置类名为con的div的样式，设置其背景颜色为灰色，居中对齐，宽度为640px，高度为1000px。
6、在css标签内，再设置类名为ff的样式，设置其高宽都为100px，背景颜色为红色，使用position定位属性设置div在页面的绝对位置，距离页面顶部为20px，距离页面左边为0px，从而实现div悬浮在页面中。
7、在浏览器打开test.html文件，查看实现的效果。

位置样式为绝对时滚动时的文本框定位问题

【中文标题】位置样式为绝对时滚动时的文本框定位问题

【英文标题】：Textbox positioning issue on scroll when the position style is absolute

【发布时间】：2013-07-24 02:12:51

【问题描述】：

我在页面上有一个 Asp:textbox（该页面也有一些不同的控件和 div），我在事件“onkeyup”上设置 style=position:absolute。 并根据输入到文本框的沙特尔动态增加其高度。但问题是当用户向下或向上滚动页面时，文本框的位置始终保持固定。”在事件“onblur”上，我更改了样式=位置= "，但是当焦点在文本框上时，它会随着向上/向下滚动而移动。 这是代码

    <asp:TextBox ID="txtComment1"  runat="server" Height="13px"  Width="99%" MaxLength="40" TextMode="MultiLine"   
     onkeyup="SetHeight(this)" onblur="Blur(this)"></asp:TextBox>

     <script type="text/javascript">

    //Setheight function is used to change the style of position:"Absolute"

    function Setheight(textscroll) 
        textscroll.style.height = "14px";
        textscroll.style.position = "absolute";
        textscroll.style.width = "49%";
    

//Blur is used to again change the style position:""

 function Blur(txtdesc1) 


        txtdesc1.style.height = "14px";
        txtdesc1.style.position = "";
        txtdesc1.style.width = "99%";

    

    </script>

附： : 我试过 HoverMenuExtender 但还是有同样的问题

【问题讨论】：

这是一个 100% 的客户端问题。显示您的实际 HTML + CSS，而不是您的 .NET 服务器端代码！

它不是服务器端代码，它只是一个客户端。

不是 HTML，它是 .NET，它是服务器代码！

【参考方案1】：

如果您希望 html 项目即使在滚动时也跟随页面向下，请尝试 position: fixed，这就是 LinkedIn 和 FB 等网站上所有标杆页眉和页脚的工作方式。

【讨论】：

我不希望我的文本框跟随向下翻页和向上翻页滚动。我希望它稳定。