某元素 fixed 后，从页面消失

最新推荐文章于 2022-11-28 16:43:16 发布

转载最新推荐文章于 2022-11-28 16:43:16 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JaneBlog/p/9210422.html

文章标签：

#前端 #ViewUI

本文介绍了解决CSS中使用position:fixed定位导致元素在页面上消失的问题，并通过设置z-index层级来确保元素正常显示。

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

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;

　　一开始是定位后，元素就从页面消失了，添加了层级之后就可以了。

转载于:https://www.cnblogs.com/JaneBlog/p/9210422.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34397291

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决ios中定位fixed的导航下滑时消失的问题

zhangxiaochunxy的博客

02-13

1303

查看原文今天在开发过程中遇到了一个定位为fixed的导航，在ios设备中下滑消失的问题。这个导航的需求是始终悬浮在页面最顶端，不管页面怎么滑动都不变。原代码如下： <div class="container"> <div class="back">返回</div> <div> 主题内容 </div> &l...

记录一次ios下fixed区域中滚动内容滑动到底部/顶部后不可滑动的问题修复

u012439689的博客

12-31

3345

如题，ios多机型，h5的页面制作的一个展示列表，外部采用fixed布局固定显示了表头筛选项的一些东西，然后中间是内容可滚动区，如下图，然后ios的机型会出现的问题就是，滚动到顶部或者底部再用力划一下的话（等到内部滚动区域滚动条消失），滚动就会被卡住，滚不动了 ...

参与评论您还未登录，请先登录后发表或查看评论

添加`position:fixed；`后元素不见了

clf20731的博客

11-27

4124

问题我想让header元素固定在页面顶部，所以加了position:fixed;，并且设置了top:0;,但是实际情况是添加完position:fixed;后，整个header就不显示了 // 用于搭建项目的框架结构 <template> <div> <header></header> </div> </template> <style scoped> * { margin: 0; padd

移动端元素消失

zona

08-17

799

移动端元素消失 fixed在移动端会引起元素消失

CSS fixed 定位元素失效的问题

weixin_30670151的博客

04-22

1153

一个示例考察下面的代码： <head> <title>css filter issue</title> <style> body { height: 200vh; background: #ddd; } .c...

position: fixed定位失效原因及解决方案

surui0419的博客

11-28

7289

position: fixed问题分析

关于fixed定位的问题，解决元素左右偏移问题

m0_62217360的博客

11-05

1518

关于fixed定位的问题，解决元素左右偏移问题

css中关于定位属性position为fixed的使用记载

09-25

比如，页面初始时，某个元素没有应用`position: fixed`，当滚动到一定位置后，通过JavaScript将其更改为`position: fixed`，这时可能会出现闪烁或者定位不准确的情况。这是因为，当元素变为固定定位时，它会从文档流...

微信小程序中的滑动页面隐藏和显示组件功能的实现代码

10-15

在微信小程序中实现滑动页面隐藏和显示组件的功能，主要是为了提升用户体验，使页面元素在特定的滚动状态下自动隐藏或显示，以符合用户的使用习惯。例如，当页面滚动到一定高度时，导航栏或底部按钮等可以自动隐藏，...

jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

11-25

jQuery 提供了一种简单的方式来实现这一功能，并且可以根据元素在页面中的显示位置来决定其是否消失或被替换。以下是如何使用 jQuery 实现这个功能的详细步骤：首先，确保在 HTML 文件中引入了 jQuery 库。在提供...

position:fixed div元素不显示

jyy1124的博客

01-26

2226

需要将div固定位置，不随页面滚动而移动位置 div设置样式: ._top{ position:fixed; top:10px; bottom:0px; left:0px; right:0px; } 设置该样式后，div不显示，但是F12是有的解决：在样式中添加z-index:999;即可具体div的位置根据需要对top bottom left right进行设置 ...

position:fixed失效，根据父类定位

远走的兔子博客

05-22

4561

当父类中用transform属性时，子元素为position:fixed时，子元素不是根据窗体定位，而是根据父元素定位。当前未找到解决方法兼容两个属性。

uniapp position: fixed 偶尔失效/不起作用（不显示）（苹果手机position: fixed兼容性/失效）

qq_17627195的博客

09-11

6404

在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。我也是网上查找的原因，似乎知识IOS系统（苹果）手机的问题。的元素放在可以滚动（拥有滚动条）元素的外面，包括。，要确保当前元素的父元素都不能添加滚动样式。的时候，如果期望实现先对。浏览器窗口定位的兼容。

在ios中fixed定位元素丢失，Date兼容NaN

palmer_kai的博客

07-08

791

Aphorism Preface 差不多有半年没有更新blog了，现在在新的公司适应了，最近喜得一千金，也慢慢适应了新的生活。今天更新一篇关于最近遇到的 ios fixed定位元素丢失 bug iphonex 上 Date 兼容问一. fixed问题现象手机环境： ios 11.0.3 预期的展示效果：图片显示完成，添加作业按钮正常 fixed定位实际展示效果：图片显示不全，且fixed 定位元素消失了如下图，添加作业按钮（fixed定位）对应的父元素高度没有撑开全屏，这

移动端web页面input+fixed布局bug总结

热门推荐

ly2983068126的博客

10-21

4万+

最近在做移动端，又涉及到了 fixed（固定位置定位）的问题，在使用fixed的过程中，遇到了一些的问题，并且部分问题无法找到较好的解决方案。下面是我在网上找到的一些解决方法，仅供参考：正常界面图中被红色选中区域为 position:fixed 元素问题1：footer输入框 focus 状态，footer 被居中，而不是吸附在软键盘上部。

css解决fixed布局不会出现滚动条的问题

小小黑

10-21

3万+

如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置： div { display:fixed; height:100%; overflow:scroll; } 但是这样并不会出现滚动条，正确的做法应该设置top和bottom为0： .fixed-content { top: 0; bottom:0; position

position:fixed失效的几种情况

weixin_45464787的博客

04-16

4807

在许多情况下，position:fixed 将会失效。MDN 用一句话概括了这种情况：当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值，那么该元素将相对于设定了 transform 的祖先元素进行定位。那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？这个问

页面增加loading 页面加载完成之后消失

06-01

您可以通过以下步骤实现页面加载时的loading效果，并在页面加载完成后自动消失： 1. 在页面中添加一个loading元素，可以是一个动画或图片等。 2. 使用CSS设置该元素的样式，使其位于页面中心并覆盖整个页面。 3. 在页面加载时，使用JavaScript添加该loading元素到页面中。 4. 在页面加载完成后，使用JavaScript将该loading元素从页面中移除。以下是一个简单的示例代码： HTML代码： ``` <div id="loading"></div> ``` CSS代码： ``` #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff url('loading.gif') no-repeat center; z-index: 9999; } ``` JavaScript代码： ``` window.addEventListener('load', function() { var loading = document.getElementById('loading'); loading.parentNode.removeChild(loading); }); ``` 这样就可以实现页面加载时的loading效果，并在页面加载完成后自动消失。