使用vh和vw单元时CSS位置绝对失败

使用vh和vw单位时，CSS位置绝对失败是因为vh和vw单位是相对于视口大小的单位，而不是相对于父元素或其他元素的单位。因此，在某些情况下，使用vh和vw单位可能会导致位置计算不准确或不符合预期。

具体来说，vh单位表示视口高度的百分比，vw单位表示视口宽度的百分比。例如，1vh等于视口高度的1%，1vw等于视口宽度的1%。这些单位可以用于设置元素的宽度、高度、字体大小等属性。

然而，当使用vh和vw单位来设置元素的位置时，可能会遇到以下问题：

1. 相对于视口大小：vh和vw单位是相对于视口大小的，而不是相对于父元素或其他元素的。因此，如果父元素的大小发生变化，或者元素嵌套在其他元素中，使用vh和vw单位设置的位置可能会出现偏移或错位。
2. 不适用于动态布局：由于vh和vw单位是相对于视口大小的，因此在动态布局中使用它们可能会导致布局的不稳定性。当视口大小改变时，元素的位置可能会发生变化，从而影响页面的布局。
3. 兼容性问题：虽然vh和vw单位在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持或支持不完全。因此，在使用vh和vw单位时，需要考虑浏览器的兼容性问题。

综上所述，虽然vh和vw单位在某些情况下可以方便地设置元素的宽度、高度等属性，但在设置元素的位置时可能会出现问题。为了避免这些问题，可以考虑使用其他更稳定和可靠的单位，如像素(px)、百分比(%)或rem单位。

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

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
• 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe