首页 > 软件开发 > JavaScript >

transform引起fixed失效解决方式

来源:互联网 2023-03-17 00:02:10 版权归原作者所有,如有侵权,请联系我们

在使用HTML5 CSS3框架时,外层元素使用transform属性,内层元素使用固定定位时,会出现失效的情况。这时,该如何解决呢?mXc办公区 - 实用经验教程分享!

transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

工具/原料

  • HTML5
  • CSS3
  • HBuilderX
  • 截图工具
  • WPS

方法/步骤

  • 1

    双击打开HBuilderX开发工具,新建一个静态页面fixed.htmlmXc办公区 - 实用经验教程分享!

    transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

  • 2

    在新建页面中,引入jquery核心文件并修改title标签内容mXc办公区 - 实用经验教程分享!

    transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

  • 3

    在body>/body>标签中,插入父子div标签,设置id属性值mXc办公区 - 实用经验教程分享!

    transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

  • 3此文章未经许可获取自百度经验
  • 4

    添加style标签,利用ID选择器控制父子div标签的样式,父div添加transform,子div添加position属性,值为fixedmXc办公区 - 实用经验教程分享!

    transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

  • 5

    保存代码并运行项目,打开浏览器查看界面显示效果mXc办公区 - 实用经验教程分享!

    transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

  • 6

    返回到HBuilderX编辑器,修改子div标签样式,然后再次查看效果mXc办公区 - 实用经验教程分享!

    transform引起fixed失效解决方式mXc办公区 - 实用经验教程分享!

  • 注意事项

    • 注意transform引起fixed失效解决方式
    • 注意transform属性的用法

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!mXc办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号