一般情况：

<!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. SQL SERVER 2000安装教程图文详解

    注意:Windows XP不能装企业版.win2000\win2003服务器安装企业版一.硬件和操作系统要求 下表说明安装 Microsoft SQL Server 2000 或 SQL Server ...

  2. Photoshop脚本之获得文件夹下所有特定后缀文件

    function getAllFiles(folderName,houzhui){ folderName var regthis = new RegExp( '.+\.('+houzhui+')$', ...

  3. 微信小程序 view 布局

    刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性”row” ...

  4. 转载：Network In Network学习笔记

    转载原文1:http://blog.csdn.net/hjimce/article/details/50458190 转载原文2:http://blog.csdn.net/mounty_fsc/art ...

  5. 服务器之ipmitool

    一般命令 raw #发送一个原始的IPMI请求,并且打印回复信息. Lan #配置网络(lan)信道(channel) chassis #查看底盘的状态和设置电源 event #向BMC发送一个已经定 ...

  6. 大话DFT频谱分析（并不是我的话）

    有限长信号DFT结果的频谱泄露 提出问题 依照我们在"信号与系统"这门课建立的印象,不管如何频率的连续正弦信号,其频谱应当是两根笔直的谱线(含负频率) 但是,当我们把一段正弦信号採 ...

  7. 【BZOJ1280】Emmy卖猪pigs 最大流

    [BZOJ1280]Emmy卖猪pigs Description Emmy在一个养猪场工作.这个养猪场有M个锁着的猪圈,但Emmy并没有钥匙.顾客会到养猪场来买猪,一个接着一个.每一位顾客都会有一些猪 ...

  8. Travel(最短路)

    Travel The country frog lives in has nn towns which are conveniently numbered by 1,2,…,n1,2,…,n. Amo ...

  9. EasyDSS流媒体服务器软件支持HTTPS-启用https服务申请免费证书

    EasyDSS流媒体服务器软件,提供一站式的转码.点播.直播.时移回放服务,极大地简化了开发和集成的工作. 其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像, 直播支持RTMP ...

  10. maven实现项目热部署

    1.Tomcat的配置 我们需要实现热部署,自然就需要通过maven操作tomcat,所以就需要maven取得操作tomcat的权限,现在这一步就是配置tomcat的可操作权限. 在tomcat的安装 ...