父元素设置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中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
随机推荐
- 一步步教你搭建TinyOS2.1.2开发环境
(本教程使用的是VirtualBOX +ubuntu14.04+tinyos2.1.2) note:看了非常多的tinyos的安装教程.区别不是非常大,无非就是安装编译器配置环境等.尽管简单,但还是有 ...
- 黑马day11 事务的四大特性
1.事务的四大特性:一个事务具有的最主要的特性.一个设计良好的数据库能够为我们保证这四大特性. 1.1原子性:原子性是指事务是一个不可切割的工作单位,事务中的操作要么都发生要么都不发生. 1.2一致性 ...
- ApiDoc 和 Swagger 接口文档
ApiDoc:https://blog.csdn.net/weixin_38682852/article/details/78812244 Swagger git: https://github.co ...
- 关于spring MVC中加载多个validator的方法。
首先讲下什么叫做validator: validator是验证器,可以验证后台接受的数据,对数据做校验. SpringMVC服务器验证有两种方式,一种是基于Validator接口,一种是使用Annot ...
- Viewpage实现左右无限滑动
实现逻辑参考:http://www.cnblogs.com/xinye/archive/2013/06/09/3129140.html 代码:如下 public class MainActivity ...
- 《挑战程序设计竞赛》2.1 深度优先搜索 POJ2386 POJ1979 AOJ0118 AOJ0033 POJ3009
POJ2386 Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 25366 Accepted: ...
- 基于jquery 移动插件的实现
引用谢灿勇 地址 http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...
- React-学习总结
概念知识:1.JSX是什么 JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展. 2.编译器——jsxTransforme ...
- 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
- 1、hive安装详细步骤
一.环境准备 hadoop-2.7.2 java 1.7.0 apache-hive-1.2.1 mysql Hive配置文件介绍 •hive-site.xml hive的配置文件 •hiv ...