子元素高度不确定,父元素高度随子元素变化,当子元素高度过高时滚动,相对定位的其他子元素的不会发生滚动
发送数据请求上传图片时,因图片的大小不确定,父元素的高无法写固定值。图片容器设置最大高度,当图片滚动时相对父元素定位的其他元素位置不随图片滚动而滚动。
代码如下,欢迎交流指正:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container { position: relative; height: 400px; width: 450px; border: black 1px solid; overflow: auto; z-index: 4; } .pic-container { position: relative; height: auto; width: 450px; max-height: 400px; overflow: auto; z-index: 9; display: none; } .logo { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: solid 1px red; z-index: 12; } .pic { height: auto; width: 100%; } .pic img { width: 100%; } </style> </head> <body> <div class="container"> <!-- 相对定位的元素 --> <div class="logo"> </div> <!-- 溢出滑动的元素 --> <div class="pic-container"> <div class="pic"> <img src="logo.png" > </div> </div> </div> <script src="./jquery2.1.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(".container").click(function (){ $(".pic-container").css({display:'block'}) $(".container").css({'height':"auto",'max-height':"400px"}) }) </script> </body> </html>