position:fixed失效情况

最新推荐文章于 2024-07-09 16:19:47 发布

weixin_33991418

最新推荐文章于 2024-07-09 16:19:47 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/liaohongwei/p/10649685.html

本文探讨了HTML中fixed定位元素在父级元素应用transform属性时可能遇到的问题及解决办法。当父级元素的transform属性值非none时，fixed定位可能会受到影响。文章提供了避免此问题的有效方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{height:2000px;transform:translate(0);}
.fixed{position:fixed;width:100px;height:100px;background:red;top:300px;}
</style>
</head>

<body>
<div class="fixed">固定定位元素</div>
</body>
</html>

fixed定位的元素，如果父级有transform样式，值不为none，那么fixed定位就会失效。

解决方法：使用transform样式的元素，不要包含fixed定位的子元素。

转载于:https://www.cnblogs.com/liaohongwei/p/10649685.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。