发送数据请求上传图片时,因图片的大小不确定,父元素的高无法写固定值。图片容器设置最大高度,当图片滚动时相对父元素定位的其他元素位置不随图片滚动而滚动。
代码如下,欢迎交流指正:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container {
position: relative;
height: 400px;
450px;
border: black 1px solid;
overflow: auto;
z-index: 4;
}
.pic-container {
position: relative;
height: auto;
450px;
max-height: 400px;
overflow: auto;
z-index: 9;
display: none;
}
.logo {
position: absolute;
top: 20px;
right: 20px;
40px;
height: 40px;
border: solid 1px red;
z-index: 12;
}
.pic {
height: auto;
100%;
}
.pic img {
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>