首先,我们将目光投向了CSS规范,我想很多人和我一样很快就想到了position 属性,说到定位,我们很容易想到这个属性。这个属性一共有四个选项:static、relative、absolute、fixed。很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的:
fixed:
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
于是我们很快就有了以下的代码,不过很遗憾,IE中并不能通过严格的测试,但是FireFox中却可以通过测试!
<html> <head> <!--http://volnet.cnblogs.com--> <title>Only fit FireFox! :(</title> <!--Some thing about the fixed style!--> <style type="text/css"> .fixed_div{ position:fixed; left:200px; bottom:20px; width:400px; } </style> </head> <body> <div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div> <div style="height:888px;"></div> </body> </html>
不管上面上面说的IE7的strict模式,很显然,除了IE7,我们的挑战还有包括IE6在内的一大堆未知的因素。很显然,虽然这个方法通过了FireFox,但我们还是宣告失败了。
难道我们只能使用JavaScript让这一切继续“卡”下去么?(我指的是用JavaScript的时候效果很卡)
当然不行,我们的症结究竟在哪?我们该如何去解除它呢?带着这样的郁闷,我们需要开始新的探险。
HTML究竟是啥?
这个问题换在别的地方问,您可能要搬出一大堆的文档来告诉我HTML的定义,但这里我并不需要那么完整的答案。我们知道HTML是由一大堆的<tag></tag>组成的,而这一大堆的<tag></tag>组合在一起,它们的结构就像一棵树,是的,HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根,那就是<html></html>节(root),在根节点下常见的节点中,我们通常能见到<head></head>和<body></body>两个节点,它们之下又有……
现在回顾一下我们的问题,我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。
那么下面让我们来回答另一个问题,啥是滚动条?
滚动条,顾名思义,就是可以滚动的条(ScrollBar)(废话 )。准确地说,滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候,为了能够让有限的空间展示无限的内容所作出的一个妥协的元素,使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚,但既然我说滚动条也是一个元素,那么它是不是也在我们的HTML中呢?又或者它是浏览器的固有的一部分?
如果您觉得它是HTML中的一部分,那么您就对了,因为它是依附容器而存在的,而默认产生滚动条的容器是<body></body>或者<html></html>节,它并不是浏览器固有的一部分,浏览器只是默认完整展示了一整个html文档,并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧,假设fixed对您当前(失败)的浏览器无效的话,那么我们来看看它们的结构,外面是html标签,向内是body标签,再向内则是div标签,div标签很明显是它们的一部分,这样假设我们的div标签所设置的定位属性无论如何(四个可能的属性皆没起到什么作用)改变不了自身显示状况。我们能否更换一个思路呢?
刚才我说了,滚动条是容器所固有的,不管是外面那个滚动条,还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢?
看到滚动条的控制可以通过CSS的overflow 的几个属性来控制,想必大家都不陌生了。(陌生的朋友点击相关链接即可进入查看)
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢?(虽说是模拟,但是效果一模一样噢~)
<html> <head> <title></title> <style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; height:100%; } .virtual_body { width:100%; height:100%; overflow-y:scroll; overflow-x:auto; } .fixed_div { position:absolute; z-index:2008; bottom:20px; left:40px; width:800px; height:40px; border:1px solid red; background:#e5e5e5; } </style> </head> <body> <div class="fixed_div">I am still here!</div> <div class="virtual_body"> <div style="height:888px;"> I am content ! </div> </div> </body> </html>分析:
html,body:将默认可能会随机出现的滚动条,完全地隐藏了,这样不管您放了啥内容,它们都不会出来了。
.virtual_body:顾名思义,就是一个假的body了,它被设置为长宽都为100%的,意思就是它利用了所有可视的浏览器窗体显示所有的内容,并垂直允许出现滚动条。
.fixed_div:这下它可以利用绝对值进行定位了,因为在这个场景下,这个页面100%地被那个假冒的body给独霸了,而滚动条反正也出不来,您就可以自认为是在某个点蹲坑了,绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
通过这篇文章,希望您能解决这个问题,更深入一点,希望您能够对HTML的具体内容有更深刻地理解
相关推荐
浏览器的滚动位置恢复行为可以分为两个步骤:在hashchange事件触发时,浏览器会拿到当前页面的document.body.scrollTop值,并与自己存储的滚动条位置进行比较,取最小的值,设置成当前的document.body.scrollTop值。...
在自定义指令中,我们设置了元素的 `position` 属性为 `fixed`,这使得元素相对于视窗固定,不会随滚动条的移动而改变位置。同时,我们也设置了元素的 `z-index` 属性为 `9999`,以确保元素始终处于最上层。 3. ...
这个div的目的是防止浏览器默认的滚动条出现,以便悬浮窗能够始终固定在视窗内。 样式方面,通过内联或外部CSS定义悬浮窗的基本样式,如高度、宽度、背景颜色、文本颜色、字体大小等。这些样式决定了悬浮窗在页面上...
内容概要:本文详细介绍了利用MATLAB和CPLEX求解器实现的电热综合能源市场双层出清模型。该模型分为上下两层,上层旨在最大化能源集线器的收益,下层则致力于最小化电力和热力市场的生产和出清成本。文中不仅提供了详细的代码示例,还解释了各个模块的功能及其背后的理论依据,如MPEC(数学规划与均衡约束)、KKT条件的应用等。此外,文章强调了代码的模块化设计和良好的注释,使得新手能够轻松理解和修改代码。最终,通过与参考文献的对比,证明了模型的有效性和准确性。 适用人群:适用于对综合能源系统优化感兴趣的初学者和有一定经验的研究人员。 使用场景及目标:①帮助研究人员理解电热综合能源市场的运作机制;②为开发更复杂的能源市场模型提供基础;③通过实际案例和数据验证模型的正确性和实用性。 其他说明:文章还提到了一些高级应用和技术细节,如储能参数调整对市场策略的影响、极端天气条件下不同能源设备的表现差异等。
内容概要:本文详细介绍了利用MATLAB实现电动汽车多目标优化调度策略,旨在通过智能充放电管理实现电网的削峰填谷。具体来说,该策略将经济成本、峰谷差和负荷波动三个目标融合为一个综合优化目标,并通过严格的约束条件确保电池安全运行。文中展示了如何使用YALMIP和CPLEX求解器对大规模电动汽车群进行快速有效的调度,最终显著改善了电网负荷曲线并降低了电池损耗成本。 适合人群:从事电力系统优化、电动汽车调度研究的专业人士,以及对智能电网感兴趣的科研人员和技术开发者。 使用场景及目标:适用于需要优化电网负荷曲线、减少峰谷差、稳定负荷波动的实际应用场景。主要目标是在不影响用户体验的前提下,最大化电网效率和经济效益。 其他说明:文中提供了详细的代码片段和参数选择依据,帮助读者理解和复现实验结果。此外,还讨论了一些调参技巧和潜在改进方向,如引入光伏预测等。
内容概要:本文详细介绍了基于三菱R系列PLC的多工位转盘机项目的编程实践。作者摒弃传统的梯形图编程方式,采用ST语言进行面向对象编程,构建了一个类似工业级框架的模板程序。主要内容包括:使用结构体进行参数传递,确保参数管理和调试的便捷性;通过功能块(FB)封装工位控制逻辑,实现模块化和复用;采用层次化的程序架构,使主程序简洁高效;设计完善的异常处理机制,提高系统的稳定性和维护性。此外,文章还展示了如何快速扩展新工位以及热替换功能的优势。 适合人群:具备PLC编程基础,尤其是熟悉三菱PLC的工程师和技术人员。 使用场景及目标:适用于需要优化PLC编程流程、提升代码可读性和维护性的工程项目。目标是通过面向对象编程思想,实现PLC程序的模块化、标准化和高效化。 其他说明:文中提供了多个具体的代码示例,帮助读者更好地理解和应用所介绍的技术和方法。同时,强调了良好的架构设计对于提高开发效率和应对需求变更的重要性。
内容概要:该论文聚焦于6G通信中20-100GHz频段的电磁场(EMF)暴露评估问题,提出了一种基于自适应可重构架构神经网络(RAWA-NN)的预测框架。该框架通过集成权重分析模块和优化模块,能够自动优化网络超参数,显著减少训练时间。模型使用70%的前臂数据进行训练,其余数据用于测试,并用腹部和股四头肌数据验证模型泛化能力。结果显示,该模型在不同参数下的相对差异(RD)在前臂低于2.6%,其他身体部位低于9.5%,可有效预测皮肤表面的温升和吸收功率密度(APD)。此外,论文还提供了详细的代码实现,涵盖数据预处理、权重分析模块、自适应优化模块、RAWA-NN模型构建及训练评估等内容。 适合人群:从事电磁兼容性研究、6G通信技术研发以及对神经网络优化感兴趣的科研人员和工程师。 使用场景及目标:①研究6G通信中高频段电磁暴露对人体的影响;②开发更高效的电磁暴露评估工具;③优化神经网络架构以提高模型训练效率和预测精度。 其他说明:论文不仅提出了理论框架,还提供了完整的代码实现,方便读者复现实验结果。此外,论文还讨论了未来的研究方向,包括扩展到更高频段(如300GHz)的数据处理、引入强化学习优化超参数、以及实现多物理场耦合的智能电磁暴露评估系统。建议读者在实际应用中根据具体需求调整模型架构和参数,并结合真实数据进行验证。
内容概要:本文详细介绍了如何使用FB284功能块在西门子S7-1200/1500 PLC中实现对V90 PN伺服系统的控制。主要内容涵盖基础配置、主动回零、定位控制以及速度点动等功能的具体实现方法和技术细节。文中不仅提供了具体的代码示例,还分享了许多实际调试过程中积累的经验教训,帮助读者更好地理解和应用这些技术。 适合人群:从事工业自动化领域的工程师和技术人员,特别是那些需要进行伺服控制系统开发和维护的专业人士。 使用场景及目标:适用于需要精确位置控制的应用场合,如生产线上的物料搬运、加工中心的位置控制等。通过学习本文,读者能够掌握使用FB284功能块实现伺服控制的基本技能,提高工作效率并减少调试时间。 其他说明:文章强调了正确的参数配置对于伺服系统正常运行的重要性,并提供了一些常见问题及其解决方案。此外,还提到了一些优化建议,如合理的速度设置和平滑启动等措施,有助于提升系统的稳定性和可靠性。
内容概要:本文是北京金融科技产业联盟发布的《基于数据空间的金融数据可信流通研究报告》,探讨了金融数据可信流通的现状、挑战和发展前景。文章首先介绍了金融数据在数字化转型中的重要性及其面临的隐私保护和安全挑战。接着,文章详细阐述了数据空间的概念及其发展历程,尤其是可信数据空间(TDM)在我国的发展情况。文中还深入分析了金融数据可信流通的典型应用场景、关键技术和方案架构,如数据访问控制、数据使用控制、智能合约、数据脱敏等。最后,文章展示了多个典型场景应用案例,如中信银行总分行数据流通管控、工银金租数据流通、银联安全生物特征支付等,并总结了当前可信数据空间建设中存在的法规、技术、标准和商业模式挑战,提出了相应的政策建议。 适用人群:金融行业从业者、数据安全管理人员、政策制定者、科技研发人员等。 使用场景及目标:①理解金融数据可信流通的重要性和挑战;②学习可信数据空间的关键技术和应用场景;③探索金融数据可信流通的具体实践案例;④了解当前可信数据空间建设的瓶颈和未来发展方向。 其他说明:本文不仅提供了详尽的技术和应用分析,还提出了具体的政策建议,有助于推动金融数据可信流通的健康发展。阅读本文可以帮助读者深入了解金融数据安全保护和高效利用的最佳实践,为相关政策和技术的发展提供参考。
内容概要:本文详细介绍了智能车环境中静态和动态风险场模型的构建及其在MATLAB中的实现。首先,通过椭圆模型建立静态风险场,模拟车辆周围的碰撞风险分布,重点在于椭圆参数的选择和坐标变换的应用。其次,动态风险场考虑了车辆之间的相对运动,利用相对速度和方向因子来评估风险值的变化。两者结合形成综合风险场,用于优化车辆的轨迹规划。文中还讨论了模型的实际应用案例,如在弯道和十字路口场景中的表现,并提供了可视化技巧和调试经验。 适合人群:从事智能车研究、自动驾驶算法开发的研究人员和技术人员,以及对MATLAB编程有一定基础的学习者。 使用场景及目标:①帮助研究人员理解和实现智能车环境中的风险场模型;②提供具体的MATLAB代码示例,便于实际应用和调试;③通过实例展示风险场模型在复杂交通场景中的应用效果。 其他说明:文章不仅涵盖了理论推导和代码实现,还包括了实际测试中的经验和教训,有助于读者更好地掌握和应用这一技术。
少儿编程scratch项目源代码文件案例素材-scratch格斗游戏引擎.zip
基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业),个人经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为毕业设计、课程设计、期末大作业,代码资料完整,下载可用。 基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业)基于Python的天气预测和天气可视化项目源码+文档说明(高分毕设/大作业
少儿编程scratch项目源代码文件案例素材-3D环境.zip
内容概要:本文详细介绍了如何利用Simplorer和Maxwell进行电机控制系统的联合仿真。主要内容分为四个部分:一是搭建电机场路耦合主电路,包括选择合适的电机模型、功率器件及其他必要元件,并进行正确的连接和参数设置;二是实现矢量控制SVPWM算法,涵盖SVPWM模块的搭建、参数设置以及信号连接;三是讨论仿真文件的可复制性和电机模型替换的具体步骤;四是总结联合仿真的优势及其应用价值。通过这种方式,不仅可以深入理解电机的工作原理,还可以优化控制算法,提升电机性能。 适合人群:从事电机控制研究和技术开发的工程师、研究人员,特别是对电机场路耦合仿真感兴趣的从业者。 使用场景及目标:适用于需要进行电机控制系统设计和优化的场合,如工业自动化、电动汽车等领域。主要目标是掌握Simplorer和Maxwell联合仿真的方法,提高电机控制系统的效率和可靠性。 其他说明:文中提供了大量实例代码和操作提示,有助于读者更好地理解和实践相关技术。同时强调了一些常见错误和解决办法,帮助初学者避开陷阱。
内容概要:本文详细介绍了基于西门子200smart PLC和昆仑通态触摸屏构建的锅炉换热站自动化系统的设计与实现。主要内容涵盖模拟量采集与处理、水泵切换逻辑、时间段控温和Modbus通讯控制等方面的技术细节及其优化措施。文中不仅展示了具体的编程技巧,如SCALE指令用于工程量转换、状态矩阵实现水泵故障记忆、时钟指令配合SFC20块搬移指令进行时间段控温等,还分享了许多实际调试过程中遇到的问题及解决方案,如通过硬件和软件滤波减少信号跳变、调整Modbus通讯参数提高稳定性等。 适合人群:从事工业自动化领域的工程师和技术人员,特别是对PLC编程和系统集成有一定经验的人士。 使用场景及目标:适用于小型工业自动化项目的开发与维护,旨在帮助技术人员掌握如何高效地搭建稳定可靠的自动化控制系统,提升系统的可靠性和易用性。 其他说明:作者通过亲身经历分享了许多宝贵的实战经验和教训,强调了理论与实践相结合的重要性。对于希望深入了解PLC编程和工业自动化应用的人来说,本文提供了丰富的参考资料和技术指导。
内容概要:本文详细介绍了T型三电平逆变器的空间矢量脉宽调制(SVPWM)开环控制实现过程。首先阐述了T型三电平逆变器的基本拓扑结构和特点,接着通过MATLAB、Python和C语言代码展示了SVPWM的具体实现步骤,包括矢量分区、作用时间计算、PWM波生成以及中性点平衡处理。文中还讨论了一些常见的工程实践技巧,如零矢量分配策略、死区时间设置等,并提供了仿真测试结果和波形分析。 适合人群:从事电力电子、新能源项目开发的技术人员,尤其是对SVPWM算法感兴趣的工程师。 使用场景及目标:适用于需要理解和实现T型三电平逆变器SVPWM开环控制的工程项目。目标是帮助读者掌握SVPWM算法的核心原理和技术细节,能够在实际项目中进行有效的算法实现和优化。 其他说明:文中引用了几篇经典的学术文献作为理论支持,同时提供了一些实用的调试建议和注意事项,有助于提高读者的实际操作能力。
麒麟arm64系统需要的qt 的离线环境,参考:https://blog.csdn.net/m0-53485135/article/details/135544602
内容概要:本文详细介绍了在一个物流中心托盘堆垛项目中使用的三菱Q系列PLC和QD77MS16模块的配置和应用。主要内容涵盖硬件架构、伺服参数配置、定位数据表、HMI设计、安全回路设计以及调试经验和技巧。文中提供了具体的代码示例,如梯形图、结构化文本和VBS脚本,展示了如何实现精确的位置控制和平滑的运动轨迹。此外,还讨论了常见的调试问题及其解决方案,如轴号选择、信号抖动、同步移动时的轴间碰撞等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是熟悉三菱PLC系统的从业者。 使用场景及目标:适用于需要深入了解三菱Q系列PLC和QD77MS16模块的应用场景,帮助工程师优化堆垛机控制系统的设计和调试,提高系统的可靠性和稳定性。 其他说明:本文不仅提供理论知识,还包括大量实战经验和具体代码示例,有助于读者更好地理解和应用相关技术。
内容概要:本文详细介绍了基于STM32F407的电池管理系统(BMS)设计方案,重点探讨了SOC均衡的实现方法和技术细节。硬件方面,使用LTC6804进行12节锂电池的电压采集,LTC3300实现高效的双向主动均衡。软件部分涵盖了SOC算法的实现,包括安时积分法和开路电压校正,并讨论了LTC6804和LTC3300的具体控制代码。此外,文章分享了许多实际开发中的经验和教训,如PCB布局注意事项、通信时序优化等。 适合人群:从事电池管理系统开发的技术人员,尤其是有一定嵌入式开发经验的研发人员。 使用场景及目标:适用于电动车、储能系统等领域,旨在提高电池管理系统的可靠性和效率,确保电池组的安全运行和延长使用寿命。 其他说明:文章不仅提供了详细的硬件和软件设计指导,还包括了大量实用的经验总结和调试技巧,帮助开发者避免常见错误。