强制让position在visibility隐藏完成后生效
时间: 2024-02-24 09:59:48 浏览: 23
要让`position`属性在`visibility`隐藏完成后生效,可以使用JavaScript来实现。可以在隐藏元素之前将其`position`属性设置为`absolute`或`fixed`,然后在元素完全隐藏后将其`display`属性设置为`none`,以确保元素完全不占用空间。
以下是一种实现方式:
```javascript
// 获取元素
var element = document.getElementById('my-element');
// 在隐藏元素之前将其定位
element.style.position = 'absolute';
// 隐藏元素
element.style.visibility = 'hidden';
// 等待一段时间(例如500ms)使元素完全隐藏
setTimeout(function() {
// 在元素完全隐藏后将其隐藏
element.style.display = 'none';
// 将元素的定位属性设置为所需的值
element.style.position = 'relative';
}, 500);
```
在上面的代码中,我们首先获取了要隐藏的元素,并在隐藏元素之前将其定位。然后,我们使用`visibility`属性来隐藏元素,并使用`setTimeout`函数等待一段时间,以确保元素完全隐藏。在元素完全隐藏后,我们将其`display`属性设置为`none`,并将其`position`属性设置为所需的值(在这里是`relative`)。这样,我们就可以确保`position`属性在`visibility`隐藏完成后才会生效。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)