父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
一般情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<title></title>
<style type="text/css">
.a {
width: 500px;
height: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: forestgreen;
/*overflow: auto;*/
}
.c {
width: 50px;
height: 1000px;
background: blue;
}
.b {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 0;
bottom: -50px;
}
</style>
</head>
<body>
<div class= "a">
<div class="c"></div>
<div class= "b"></div>
</div>
</body>
<script> </script>
</html>
效果：
过长溢出，绝对定位元素相对父元素位置设置
如果将overflow设置为hidden
过长部分被隐藏，无法滚动，绝对定位元素也被隐藏
如果将overflow设为scroll或auto
出现滚动条，绝对定位元素的位置将相对于父元素的内容位置设置！
父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动的更多相关文章
- 父元素高度不确定，子元素左右等高的div布局
上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...
- 清除浮动2-父元素设置overflow:hidden
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- 设置overflow:hiden行内元素会发生偏移的现象
父级元素包含几个行内元素 <div id="box"> <p> <span>按钮</span> <span>测试文字文字 ...
- JAVA读取XML文件并解析获取元素、属性值、子元素信息
JAVA读取XML文件并解析获取元素.属性值.子元素信息 关键字 XML读取 InputStream DocumentBuilderFactory Element Node 前言 最 ...
- 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 父容器利用opacity设置透明后，子元素跟着变透明的解决方案
背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...
- CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- 原生JavaScript如何解决父元素查找指定类名的子元素的问题
问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
随机推荐
- 通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML. 不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素.可以通过 jQuery 来生成文本/HTML(就 ...
- Linux C 获取系统时间信息
比如获取当前年份: /* 获取当前系统时间 暂时不使用 ; ; time_t now; struct tm *timenow; time(&now); timeno ...
- Java数据类型的转换:隐式(自动)转换与强制转换
原文链接:http://java.chinaitlab.com/base/725590.html 一些初学JAVA的朋友可能会遇到JAVA的数据类型之间转换的苦恼,例如,整数和float,double ...
- Java类的加载、链接和初始化（个人笔记）
这里看到一篇比较好的文章:http://www.infoq.com/cn/articles/cf-Java-class-loader 这里只是针对什么时候会触发java类的初始化(注意:这里不是说的实 ...
- es站内站内搜索笔记（一）
es站内站内搜索笔记(一) 第一节: 概述 使用elasticsearch进行网站搜索,es是当下最流行的分布式的搜索引擎及大数据分析的中间件,搜房网的主要功能:强大的搜索框,与百度地图相结合,实现地 ...
- 巨蟒django之权限8:排序&&菜单展开权限归属
1.权限控制的流程+表结构 内容回顾: wsgi:socket进行收发消息 中间件:(超级重点的面试题)在全局范围内控制django的输入和输出的一个钩子,处理输入和输出说白了就是处理请求和响应req ...
- h5 localStorage本地存储
用户名:<input type="text" id="txtname"/> 密码:<input type="text" i ...
- Python判断网络是否可以访问
import urllib url = "http://www.baidu.com" try: status = urllib.urlopen(url).code print st ...
- 转载：http://blog.csdn.net/foruok/article/details/53500801
凭兴趣求职80%会失败,为什么 标签: 求职跳槽找工作兴趣技术 2016-12-07 06:51 43316人阅读 评论(69) 收藏 举报 本文章已收录于: 分类: 随笔(144) 作者同类文章 ...
- [转载]在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)，x-requested-with XMLHttpRequest
在服务器端判断request来自Ajax请求(异步)还是传统请求(同步) 在服务器端判断request来自Ajax请求(异步)还是传统请求(同步): 两种请求在请求的Header不同,Ajax 异步 ...