一般情况：

<!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. Vmware私有云虚拟机（CentOS 6.5 OS）之根分区扩容

    注:适用于未使用lvm管理的分区,目前仅在CentOS 6.5 上操作,其他系统尚未测试,请谨慎操作 一.查看当前分区状况 [root@disk-test ~]# df -h Filesystem   ...

  2. jQuery + Cookie引导客户操作

    网址:http://www.sucaihuo.com/js/707.html 示例:http://www.sucaihuo.com/jquery/7/707/demo/

  3. c# 扩展方法奇思妙用基础篇八：Distinct 扩展

    刚看了篇文章 <Linq的Distinct太不给力了>,文中给出了一个解决办法,略显复杂. 试想如果能写成下面的样子,是不是更简单优雅 var p1 = products.Distinct ...

  4. vs2010 sp1安装

    错误 1 Installing Visual Studio 2010 SP1 fails with Generic Trust Failure  Installation did not succee ...

  5. MFC中调用chm帮助文档（使用相对路径）

    主要就一句话: ShellExecute(NULL,L"Open",path,NULL,NULL,SW_SHOWMAXIMIZED); 常用的显示方式是SW_SHOWNORMAL和 ...

  6. js 触摸事件 touch

    //ban 为某div let startX = 0; ban.addEventListener("touchstart",function(){ //获取初始点击位置 start ...

  7. AsyncTask工作机制简介

    昨天写的图片的三级缓存,假设有兴趣,能够去看下,浅谈图片载入的三级缓存原理(一) http://blog.csdn.net/wuyinlei/article/details/50606455 在里面我 ...

  8. hdu5125(LIS)

    相当于用多个O(nlog(n))LIS来做. // // main.cpp // 160322 // // Created by 陈加寿 on 16/3/22. // Copyright © 2016 ...

  9. JSON工具类库： alibaba/fastjson 使用记录

    JSON工具类库: alibaba/fastjson 使用记录 一.了解JSON JSON标准规范中文文档: http://www.json.org/json-zh.html 最佳实践:http:// ...

  10. 将方法定义在prototype上的好处

    通常js类定义和使用的是这样的: var Class=function(){}; Class.prototype.sharedFn=function(){}; var instanceA=new Cl ...