一般情况：

<!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. 理解和使用WPF 验证机制(值得推荐）

    首先建立一个demo用以学习和实验WPF Data Validation机制.创建一个数据实体类: public class Employee { public string Name { get;  ...

  2. Windows下使用Visual Studio 2010 编译ffmpeg全过程

    (注意:请务必先阅读:七,后记补充:) ffmpeg是一个开源的多媒体库,使用非常广泛. 在linux下编译ffmpeg非常简单,而在windows下编译就不是那么容易了.一般在windows下使用M ...

  3. mybatis if test 相等的情况怎样动态拼接sql

    今天程序须要依据前台的传过来的状态推断在数据库里是取 where a>b 还是 a<b 还是 a=0 的情况  搞了一下午最后试了下 在if 里面拼接  #{status}=#{statu ...

  4. ios关于数据的存储

    本文转载至http://blog.csdn.net/chen505358119/article/details/9278539             这里我总结了一下数据的存储方式,一是保存在沙盒里 ...

  5. Android开发：《Gradle Recipes for Android》阅读笔记1.1

    第一章1.1节 注:下面都是用android studio新建出来的默认项目配置,没有修改 1.settings.gradle记录了哪些子目录包含了它们自己的工程,例如:include':app',如 ...

  6. 2、ACE-实用生活口语-介绍 Introductions

    (1) (2) (3)认识你很荣幸,如何称呼您呢?It's a pleasure to meet you.I'm glad to meet you.May I have your name?How s ...

  7. 《从零开始学Swift》学习笔记（Day 20）——函数中参数的传递引用

    原创文章,欢迎转载.转载请注明:关东升的博客 参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以 ...

  8. jquery生成二维码图片

    1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...

  9. JS添加标签

    <script>            function show(){                $('.add').unbind();                $('.low ...

  10. Server responded "Algorithm negotiation failed" SSH Secure链接服务器错误

    Ubuntu 16.04安装openssh-server后,使用ssh客户端连接时可能报此错误,情况如下图所示: server responded "algorithm negotiatio ...