javascript - 如何让一个层的位置随着背景层的大小进行变化？
本文介绍了javascript - 如何让一个层的位置随着背景层的大小进行变化？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
测试图：
当图片缩小时，子层1就出离了背景层。
要怎样才能保证子层1一直在背景层的图片上？
html代码：
<body style="height: 100%">
<div class="fu" >
<!--父层-->
<div class="zi1">子层1</div>
<div class="zi2">
<img src="../public/images/test.png" style="width: 100%">
</div></div>
</body>
css层：
<style>
.fu {
background-color: #CCC;
width: 100%;
height: 50%;
border: 5px dotted #0F0;
margin: 0px;
padding: 0px;
}
.zi1 {
/*absolute
对自己的影响：相对于父层进行偏移，偏移的值是左50px，上50px
对其它层的影响：对同一个父层下的其它元素而言，该层是不存在的，所以其它层将重新排列。
*/
/*position: absolute;*/
/*relative
对自己的影响：相对于自己原来的位置进行偏移
对其它层的影响：虽然它自己相对于原来的位置进行了偏移，但对同层内的其它元素而言，它原来的位置好像还存在一样，仍然占据这位置，影响着其它层，是
使得其它层位置不变*/
position: absolute;
left: 45%;
top: 30%;
height: 50px;
width: 100px;
border: 3px dashed #96F;
background-color: #3F9;
margin: 0px;
padding: 0px;
}
.zi2 {
border: 3px solid #CC3;
background-color: #F60;
margin: 0px;
padding: 0px;
}
body {
background-color: #FF9;
margin: 0px;
padding: 0px;
}
</style>
解决方案
相对父层进行绝对定位，那就要在.fu里加position:relative 的
这篇关于javascript - 如何让一个层的位置随着背景层的大小进行变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
