一般情况：

<!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，绝对定位的子元素会被隐藏或一起滚动的更多相关文章

  1. 父元素高度不确定，子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  2. 清除浮动2-父元素设置overflow:hidden

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  3. 设置overflow:hiden行内元素会发生偏移的现象

    父级元素包含几个行内元素 <div id="box"> <p> <span>按钮</span> <span>测试文字文字 ...

  4. JAVA读取XML文件并解析获取元素、属性值、子元素信息

    JAVA读取XML文件并解析获取元素.属性值.子元素信息 关键字 XML读取  InputStream   DocumentBuilderFactory   Element     Node 前言 最 ...

  5. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  6. 父容器利用opacity设置透明后，子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  7. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  8. 原生JavaScript如何解决父元素查找指定类名的子元素的问题

    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...

  9. jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

    前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...

随机推荐

  1. Spring MVC多项单选按钮

    以下示例显示如何在使用Spring Web MVC框架的表单中使用多选按钮(RadioButton).首先使用Eclipse IDE来创建一个WEB工程,实现一个让用户可选择自己喜欢的数字的功能.并按 ...

  2. 实战Java虚拟机之中的一个“堆溢出处理”

    从今天開始.我会发5个关于java虚拟机的小系列: 实战Java虚拟机之中的一个"堆溢出处理" 实战Java虚拟机之二"虚拟机的工作模式" 实战Java虚拟机之 ...

  3. c++通过类名动态创建对象

    转载:http://www.seacha.com/article.php/knowledge/cbase/2013/0615/2154.html 主要思想:在每次创建类的过程中,通过各自类的辅助类(所 ...

  4. Hibernate-缓存/懒加载/抓取策略

    懒加载测试: /*类的延迟加载 * * session.get * 1.方法加载出来的对象是class对象 * 2.在session.get方法执行的时候发出sql语句 * 3.class对象是有值的 ...

  5. Windows10环境vagrant+VirtualBox虚拟机无法创建私有网络的解决方案。

    报错信息 ==> default: Clearing any previously set network interfaces...There was an error while execu ...

  6. Android UI开发第二十六篇——Fragment间的通信

    为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把它们跟一个Activity关联,并 ...

  7. 【BZOJ5055】膜法师 树状数组

    [BZOJ5055]膜法师 Description 题目描述 在给定的维度序列a中, 求出所有满足i<j<k且ai<aj<ak的ai*aj*ak的和 即 ∑ (a_i*a_j* ...

  8. Cocos2d-x Lua中实例：特效演示

    下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Back按钮可以返回到菜 ...

  9. angularjs 发送ajax请求的问题

    在angularjs中使用 ajax 如果使用 jquery的 ajax发送请求会遇到结果返回了,但是页面的值却没有改变,如: $scope.queryNameMatch = function() { ...

  10. WCF基础之事务

    说到事务,我最先想到的是“回滚”. 百科:事务是恢复和并发控制的基本单位.事务应该具有4个属性:原子性.一致性.隔离性.持久性.这四个属性通常称为ACID特性.好了,具体的就不多复制了. 我小试了一下 ...