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

最新推荐文章于 2023-01-02 21:27:42 发布

weixin_30815427

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量2.5k

点赞数

文章标签： 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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30815427

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

overflow:auto;导致子元素定位随着滚动条滚动而向上滚动

a__person的博客

01-17

2481

相对定位的父元素;设置overflow:aotu;之后;相对定位的子元素会随着父元素滚动当我们将红色div的buttom属性设置为-100的时候;也就是将红色div在父元素外定位红色div在定位父元素的下面,并且没有在页面上显示,当我们滚动滚动条的时候,红色div显示在页面上,并且和刚刚的效果一样,是随着父元素的滚动而滚动的; 那么外层父元素的滚动条和里面的文字信息撑起来的高度有没有关系呢?我们把...

八、overflow:hidden;搭配定位不会被修剪的特殊情况

weixin_40976555的博客

04-26

7103

一、知识点：1.overflow是指内容溢出元素的框发生的情况；属性值:visible 默认值，内容呈现在元素框外； hidden 内容裁剪，超出内容不可见； scoll 超出部分生成滚动条显示； auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容； inherit 规定从父元素继承overflow属性的值；2.相对定位: position:relati...

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

元素设置overflow:auto后子元素设置position:absolute也会占正常文档流的位置，如何解决？

小沐

04-08

2376

元素设置overflow:auto后子元素设position:absolute也会占正常文档流的位置，求大神解答是什么原因，如何解决？ <divclass="test1"style="width:400px;height:400px;overflow:auto;border:1pxsolid#ccc;"> <divstyle="width:200px;heigh...

css层的定位问题--父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动

Baby_加油_的博客

12-12

9627

话不多说，直接上图看问题下图是有不符合需求的问题图，整个是个弹框，下拉框是一个ul列表，要的是这个列表在最高层级，但是图中却隐藏在了里面~~ 下图是理想结果弹框是fixed定位，列表框外有一个relative定位，列表框是absolute定位，是一个多级定位组成，按理来说，在这种情况下，子元素的层级应该是最高的，那么为什么会出现这种问题呢，经查证，一个小小的属性造成了这一问题overflo...

父级overflow为scroll时，绝对定位的子元素会被隐藏或一起滚动

热门推荐

yujin0213的博客

01-18

1万+

需求：父级边框固定，里面的内容滚动由于是图片边框，于是我把边框的上下部分单独切图，中间重复部分平铺想要的效果图：一开始的写法： html: div class="paradise-wrap"> div class="paradise">div> div> css: .paradise-wrap{ position: relativ

外层元素overflow:auto/scroll导致absolute定位的子元素溢出部分被隐藏

Wind_waving的博客

03-14

1万+

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

HTML5和CSS3 WEB技术开发

张晨光老师的播客

01-02

6714

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

html5css3面试题及答案,前端面试题及答案-CSS篇.docx

07-05

* 浮动引起的问题：父元素的高度无法被撑开，影响与父元素同级的元素 * 解决方法： + 利用 clear 清除浮动 + 在父元素后面额外添加标签 + 父元素上使用 after 伪类 + 利用 overflow 清除浮动垂直居中 * 实现...

CSS如何设置高度为屏幕高度_面试题联盟之CSS篇

weixin_39948111的博客

11-22

1893

关注入坑互联网，回复“加群”加入我们一起学习，天天进步1、CSS3的新特性实现圆角(border-radius)阴影(box-shadow)文字加特效(text-shadow)线性渐变(gradient)旋转(transform)媒体查询，多栏布局2、CSS中 link 和@import 的区别link属于HTML标签，而@import是CSS提供的;页面被加载的时，link会同时被...

定位

m0_46466262的博客

05-23

3038

定位(确定元素的位置) 相对定位(position:relative) 我们以前学过几种布局方式浮动从左往右依次排列正常布局从上往下依次排 display:inline-block 看上去水平排列,本质上还是文本,有解析空格和垂直对齐的问题这些能解决掉布局的很多问题,但是对于某些特殊情况 ul{ border: 2px solid pink; } li{ width: 100px; height: 100px; background-color: s

父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动

weixin_30586085的博客

10-29

2447

一般情况： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="...

解决CSS中由于overflow导致子元素绝对定位错误

weixin_44557473的博客

04-19

3903

由于父元素设置overflow属性导致子元素绝对定位错误

祖父元素中设置overflow:auto,子元素设置position:absolute会随着滚动条滚动，而不能浮动到元素上

miin_ying的博客

06-07

823

css

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小

NeiHan2020的博客

12-16

8016

发现 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小。代码：默认效果：给父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; ：（三者效果除了scroll包含上下滑块，在这里使用表达意思一致，选其一使用overlay）效果总结 ...

overflow 与 position定位之间的影响

hd07220的博客

12-07

2492

绝对定位元素不总是被父级 overflow 属性裁剪，尤其当 overflow 在绝对定位元素及其包含块之间的时候。 overflow 元素同时也是定位元素时，绝对定位的子元素会被裁切； overflow 元素和绝对定位元素之间有定位元素（relative），也会被裁切；中间不论隔多少层，只要不存在定位元素，那个定位祖先的 overflow 始终可以裁切 absolute 子元素，即使中间元素也添加了 overflow，也只会被定位祖先裁切 ...

overflow与定位

平平无奇小码农的博客

02-19

2722

什么是绝对定位：设置为绝对定位的元素框从文档流完全删除。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。例子：有两个父子关系的div元素 <style> * { margin: 0; padding: 0; } .box { position: relative; margin: 100px; width: 200px;

CSS布局--定位与浮动（解决父级边框塌陷）

weixin_44889526的博客

08-12

187

CSS布局---定位：position属性来实现html元素的定位 static：默认值，没有定位（以标准流显示） relative：相对定位相对自身原来位置进行偏移；偏移设置：top、left、right、bottom 特点：相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有影响相对定位的盒子原来的位置会被保留下来 absolute：绝...

overflow:hidden同样会隐藏position:absolute的子元素

边城的专栏

10-24

1万+

父元素中有overflow:hidden, 子元素absolute不能显示 .parent{ height:40px; width:200px; border:solid 1px black; position:relative; } .sub{ position:absolute; top:10px; left:10px; heig

overflow-x:hidden对其内position:absolute的影响

weixin_36094484的博客

08-02

4991

在写一个Header组件的时候，添加了其中一行样式： .header{ overflow-x:hidden; ... } 随后添加一个下拉列表，很自然地添加了： .downlist{ position:absolute; top:100%; left:0px; ... } 然后发现，原本应该显示在.header以外的.downlist，却显示在.header内，并成...

使用sticky吸顶，父元素需要设置 overflow: hidden;如何实现