父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
一般情况：
<!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
出现滚动条，绝对定位元素的位置将相对于父元素的内容位置设置！
