内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

最新推荐文章于 2022-04-19 12:44:26 发布
最新推荐文章于 2022-04-19 12:44:26 发布
阅读量210 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/dtdxrk/p/4074209.html
本文解决了一个常见的CSS布局问题，即内层元素设置position:relative后，父元素的overflow属性失效。通过在父元素外层容器加入position:relative，可以有效解决该问题。

内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效

解决方法：在position:relative的外层父容器加position:relative就可以搞定

转载于:https://www.cnblogs.com/dtdxrk/p/4074209.html

子元素绝对定位跟随父元素overflowscroll滚动问题
有问题 ! 请留言 !
07-21 1万+
子元素绝对定位跟随父元素overflowscroll滚动问题 写项目的时候忽然遇到一个问题, 子元素固定定位,父元素设置 overflow:scroll超出部分滚动, 结果固定定位的元素仍然会随着滚动条滚动, 按照原先的理解,父元素内部滚动是不会影响固定定位的元素的 原先代码样例: <div class="box"> <div class="child-1">&lt...
js解决overflow：scroll失效问题
weixin_34128534的博客
07-03 1万+
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题iscroll4webhtml5mobilejavascriptweb移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求...
css中position:relative和overflow:hidden之间的问题
09-25
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成relative便可解决此问题
解决CSS中由于overflow属性导致子元素绝对定位失效的问题
weixin_44557473的博客
04-19 4102
由于父元素设置overflow属性导致子元素绝对定位错误
父级overflow为scroll时，绝对定位的子元素会被隐藏或一起滚动
wjy397的专栏
11-13 1485
https://blog.youkuaiyun.com/yujin0213/article/details/79093480 需求：父级边框固定，里面的内容滚动 由于是图片边框，于是我把边框的上下部分单独切图，中间重复部分平铺 想要的效果图： 一开始的写法： html: <div class="paradise-wrap"> <div class="paradise"&gt...
父容器 overflow: "auto" 导致子元素悬浮内容被裁剪
06-21
我们正在解决一个CSS布局问题：当父容器设置了overflow:auto时，其内部有悬浮内容（例如使用position:fixed或position:absolute定位的元素）可能会被裁剪（即部分内容不可见）。这是因为overflow:auto会创建一个新的...
解决border-radius失效问题
12-09
5. **父元素限制**：如果父元素的`overflow`属性设置为`hidden`或`scroll`，可能会裁剪掉子元素的圆角。可以尝试调整父元素的`overflow`设置，或者将圆角应用到父元素。 ```css .parent { overflow: visible; /* ...
使用 better-scroll 实现纵向横向双向滚动并设置吸顶
hello，是翠花呀
04-19 5515
使用 better-scroll 实现纵向横向双向滚动 需要达到的效果：右侧内容左右滚动时，左侧边栏不动，上下滑动时整体内容上下滚动 如图： 1.纵向滚动 安装并引入 import BScroll from 'better-scroll' 因为滚动默认是纵向的，所以不需要多设置其他参数 首先在 HTML 部分设置滚动外层容器（centent)和滚动内容(content-box)，设置外层 di...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随借备用金 - 嵌套页面</title> <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #container { position: relative; width: 100%; height: 100%; } iframe { border: none; width: 100%; height: 100%; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1A1A1A; display: flex; justify-content: center; align-items: center; z-index: 100; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 200, 145, 0.3); border-top: 4px solid #FFAD5D; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="container"> <!-- 加载动画 --> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> </div> <!-- 嵌套的iframe --> <iframe src="https://d1.hdncxd.com/s/d1" id="contentFrame" allow="fullscreen"></iframe> </div> <script> // 等待iframe加载完成后隐藏加载动画 document.getElementById('contentFrame').addEventListener('load', function() { document.getElementById('loadingOverlay').style.display = 'none'; // 额外处理：确保iframe可以全屏显示 try { this.contentWindow.focus(); } catch(e) { console.log('跨域限制，无法直接操作iframe内容'); } }); // 如果加载失败的处理 document.getElementById('contentFrame').addEventListener('error', function() { document.getElementById('loadingOverlay').innerHTML = '<div style="color: #FFAD5D; text-align: center; padding: 20px;">' + '<p>页面加载失败</p>' + '<button onclick="window.location.reload()" style="background: #FFAD5D; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin-top: 10px;">重新加载</button>' + '</div>'; }); </script> </body> </html>帮我分析下为啥嵌套加载出来页面 但是在ios浏览器里面打开不能使用里面的功能 嵌套页面不能自动跳转
最新发布
08-28
iOS的UIWebView/WKWebView对嵌套滚动容器有特殊要求，像引用[3]那种overflow-scroll的div，如果内部有可点击元素，必须额外添加-webkit-overflow-scrolling:touch属性才能正确响应触摸事件。否则会出现“点击穿透”...
IE6,7局部滚动条中元素position:relative或绝对定位滚动无效BUG
99guo的专栏
11-27 1267
问题现象描述：IE6,IE7下元素使用position:relative无法跟随父级一直滚动  position:relative; 父级 overflow:scroll时， IE6子级不随滚动条滚动，IE7也没有修改这个BUG 解决方案：父级元素添加 “position:relative;left:0;top:0;”
解决overflow:hidden与定位一起使用子元素定位后元素被裁剪，隐藏不见问题
热门推荐
marendu的博客
06-16 2万+
示例如下： <body> <div class="b"> b <div class="c"> c </div> </div> </body> //css <style> .b{ position: absolute; width: 300px; height: 300px; backgrou
css中position:relative和overflow:hidden的问题
weixin_30514745的博客
05-05 366
今天在做网页的时候发现一个问题，在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，在IE8、FF，Chrome中均正常显示如下代码： <div style="height:100px; width:100px; background:#CCC; o...
小程序scroll-view+position: fixed定位底部时内容不显示问题
chaosama的博客
03-20 3402
在开发者工具是没问题，但是在真机上会有这么一个问题： 当页面内容无法到达底部的时候，就会出现被position: fixed的view无法显示的问题 解决办法就是给scroll-view上高度，height: 100vh; ...
overflow 与 position定位之间的影响
hd07220的博客
12-07 2589
绝对定位元素不总是被父级 overflow 属性裁剪，尤其当 overflow 在绝对定位元素及其包含块之间的时候。 overflow 元素同时也是定位元素时，绝对定位的子元素会被裁切； overflow 元素和绝对定位元素之间有定位元素（relative），也会被裁切； 中间不论隔多少层，只要不存在定位元素，那个定位祖先的 overflow 始终可以裁切 absolute 子元素，即使中间元素也添加了 overflow，也只会被定位祖先裁切 ...
CSS 在div最外层添加向下的滚动条，在内层嵌套向左的滚动条
weianl的博客
07-19 3884
首先我们最外层设了个大div，内层设置了一个小div，内层div要设置高度，不然滚动条overflow: auto;属性不生效，然后内层div的高度要超出屏幕外，我们这里给了1000px，不然更换屏幕很长的设备类容会少了一截，并不是我们想要的效果，然后如果底部有切换栏的话，加个边距和切换栏的高度一样就不会遮住内容了。 html： <div class="father"> &l...
position:relative元素滚动条无效
depravedAngel1833的专栏
09-14 903
原文地址：http://www.abigdreamer.com/index.php/archives/506   这是一个已知的BUG：IE6 ，IE7 ，IE9浏览器，当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时，会表现出postion:absolute的行为。出现滚动条无效的bug。 解决方法： 1.为包含块元素添加属性...
父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
weixin_30586085的博客
10-29 2525
一般情况： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值