一般情况：

<!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. 通信协议之广播---recvfrom 放回客户端的ip地址第一次全为0.0.0.0

    遇到一个很恶心的问题. while(1) { recvfrom(sockfd, readbuff, UDP_CMD_BUFF_LENGTH - 1, 0, (struct sockaddr *)&am ...

  2. /dev/null简介

    在类Unix系统中,/dev/null,或称空设备,是一个特殊的设备文件,它丢弃一切写入其中的数据(但报告写入操作成功),读取它则会立即得到一个EOF[1]. 在程序员行话,尤其是Unix行话中,/d ...

  3. tinycore Network card configuration during exec bootlocal.sh

    question: tinycore在boot时, 运行bootlocal.sh脚本,其中有局域网通信的部分,一直跑不通,测试了一下才知道是运行bootlocal.sh的阶段,网络可能没有配置好,ip ...

  4. oracle高水位

    oracle高水位http://www.cnblogs.com/chuyuhuashi/p/3548260.htmlhttp://blog.csdn.net/wyzxg/article/details ...

  5. Javascript间歇调用和超时调用

    间歇调用:每隔指定的时间就执行一次代码 超时调用:在指定的时间过后执行代码  HTML Code  12345678910111213141516171819   <!DOCTYPE html& ...

  6. 在PC端或移动端应用中接入商业QQ

    前两天在做一个项目XXX的时候,遇见一个问题,在页面中需要接入企业的QQ,在查找腾讯API后无果,则请求人工服务,然后人家给一网址(就是API接口),然后你只需要登录你的QQ,然后选择相应的显示类型, ...

  7. mysql的体系架构和存储引擎

    定义数据库和实例 数据库:物理操作系统的文件或其他形式文件类型的集合.在mysql数据库中,数据库文件可以是frm.MYD.MYI.ibd结尾的文件. 实例:MySQL数据库由后台线程以及一个共享内存 ...

  8. UESTC 491 Tricks in Bits

    Tricks in Bits Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit  ...

  9. iframe脸面的页面和父页面之间的交互方法

    1.iframe父页面修改iframe中的页面的信息 var obj = document.getElementById("iframeId").contentWindow;   ...

  10. 如何理解docker镜像build中的上下文

    参考:https://yeasy.gitbooks.io/docker_practice/content/image/build.html 理解上线文概念非常重要,不然可能碰到一些奇怪的问题. 构建镜 ...