当父元素设置为overflow：auto时，后代position：absolute的元素依然会把父元素撑开...

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量2.4k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xwtcm/p/7489656.html
版权

 

当父元素设置为overflow：auto时，后代position：absolute的元素依然会把父元素撑开。如下图，下拉框的定位是absolute。

去掉父元素overflow：auto后显示

等待解决办法！！！！！！！！

 

转载于:https://www.cnblogs.com/xwtcm/p/7489656.html

weixin_30815427
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
overflow:auto的用法详解
01-18
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
weixin_35698190的博客
06-09 2229
纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？ 目前想到的只能用js和jquery来实现了，用js获取子元素的高度，赋值给父元素。test.out {position:relative;}.out:after{content: "";clear: both;}.inner {position:absolute;height:60px;backg...
flex布局 子元素无限撑大元素问题解决
pon的博客
01-15 555
flex子元素不限撑大解决办法
外层元素overflow:auto/scroll导致absolute定位的子元素溢出部分被隐藏
Wind_waving的博客
03-14 9073
1. 问题重现： 简易版复现这个问题的代码如下： <div id='wrapper' style="height: 80px;background-color: bisque;width: 400px;overflow-x: auto;display: flex;flex-wrap: nowrap;"> <div class="menu">111 <div style="width: 100%;position: absolute;bot
position:absolute 父元素高度塌陷
2shou
02-25 2882
position:absolute 父元素高度塌陷
元素设置overflow:auto后子元素设置position:absolute也会占正常文档流的位置，如何解决？
小沐
04-08 2215
元素设置overflow:auto后子元素设position:absolute也会占正常文档流的位置，求大神解答是什么原因，如何解决？ <divclass="test1"style="width:400px;height:400px;overflow:auto;border:1pxsolid#ccc;"> <divstyle="width:200px;heigh...
overflow:auto;导致子元素定位随着滚动条滚动而向上滚动
a__person的博客
01-17 2143
相对定位的父元素;设置overflow:aotu;之后;相对定位的子元素会随着父元素滚动当我们将红色div的buttom属性设置为-100的时候;也就是将红色div在父元素外定位红色div在定位父元素的下面,并且没有在页面上显示,当我们滚动滚动条的时候,红色div显示在页面上,并且和刚刚的效果一样,是随着父元素的滚动而滚动的; 那么外层父元素的滚动条和里面的文字信息撑起来的高度有没有关系呢?我们把...
父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
weixin_30586085的博客
10-29 2200
一般情况： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="...
父元素设置overflow: overlay； 或 overflow: scroll； 或 overflow: auto； 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
NeiHan2020的博客
12-16 7493
发现 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小。 代码： 默认效果： 给父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; ： （三者效果除了scroll包含上下滑块，在这里使用表达意思一致，选其一使用overlay） 效果 总结 ...
css设置子元素相对于父元素保持位置不变（含有滚动条的父元素）
热门推荐
yzy85的专栏
04-19 1万+
方法一：利用子元素设置position:fixed后由于transform导致的相对视口定位失效bug引起的fixed相对于父级定位； 方法二：利用子元素设置position:absolute后会相对于第一个设置了relative的元素定位来保持位置；
详解CSS中zoom属性或overflow:auto属性清除浮动的作用
11-21
因为Zoom属性是IE浏览器的专有属性，所以他清除浮动作用只适用于IE浏览器，而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用...
css中overflow:hidden失效问题的解决方法
11-21
因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。 一探究竟 重要的事再说一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隐藏溢出的绝对定位的子元素，...
css中position:relative和overflow:hidden之间的问题
09-25
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成relative便可解决此问题
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1459
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1139
​​​​​​​。
一个小时学习javaScript
weixin_43064364的博客
04-20 858
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 740
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 507
官网代码（在取消选中状态的时候不生效）
PLSQL的下载与安装
code袁的博客
04-18 540
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
div设置属性position: absolute后设置overflow: auto;无效
06-07
例如，如果你想要为一个 `position: absolute` 的 `div` 元素设置滚动条，可以将其父元素也设置为 `position: relative` 或 `position: absolute`，然后对其父元素设置 `overflow: auto`，如下所示： HTML 代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值