在parent上使用skew会导致sidenav失去位置

。Skew是一种CSS变形属性，用于将元素沿着水平或垂直方向进行倾斜变形。然而，当在parent元素上应用skew时，会导致其子元素也受到影响，可能导致布局错乱。

为了解决这个问题，可以考虑以下几种方法：

1. 使用transform-origin属性：通过设置transform-origin属性，可以改变skew变形的原点位置。通过调整原点位置，可以尽量减少对子元素的影响，从而避免sidenav失去位置。具体的transform-origin值需要根据实际情况进行调整。
2. 使用position属性：通过设置parent元素的position属性为relative或absolute，可以将其作为定位的参考点，从而避免子元素受到skew变形的影响。同时，需要对sidenav进行适当的定位，以确保其位置正确。
3. 使用额外的容器元素：可以在parent元素内部添加一个额外的容器元素，将skew变形应用于该容器元素，而不是直接应用于parent元素。这样可以将skew的影响限制在容器元素内部，而不会影响到sidenav。

总结：在使用skew进行元素变形时，需要注意其对子元素的影响。通过调整transform-origin属性、使用position属性或添加额外的容器元素，可以避免sidenav失去位置。具体的解决方法需要根据实际情况进行调整和尝试。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS：https://cloud.tencent.com/product/css
• 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
• 腾讯云云原生容器服务TKE：https://cloud.tencent.com/product/tke
• 腾讯云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云内容分发网络CDN：https://cloud.tencent.com/product/cdn
• 腾讯云人工智能AI：https://cloud.tencent.com/product/ai
• 腾讯云物联网IoT Hub：https://cloud.tencent.com/product/iothub
• 腾讯云移动开发MPS：https://cloud.tencent.com/product/mps
• 腾讯云对象存储COS：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务BCS：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙服务：https://cloud.tencent.com/product/um