定位 问题

 本是周末，项目页面出现了问题，today is  处理整个项目的问题页面ing,

今天 有个关于定位的问题，值得写一下笔记；

  关于页面截图：

 

代码：

<div id="formbackground" style="position:absolute; z-index:-1;">
    <img src="~/Content/img/erweima.jpg" height="100%" width="100%" />
</div>
<div class="QRC-img" style=" position: relative;left: 35%; margin-top: 47%;width:30%; ">
    <img src="~/Content/img/timg.png" />
    
</div>
<script type="text/javascript">
    $(function () {
        $('#formbackground').height($(window).height());
        $('#formbackground').width($(window).width());
    });
</script>

不知道代码是不是最简单和易懂的，写代码手法，因人而易，看懂就ok；

背景图片根据页面的大小进行调整，故就是整个屏幕的背景图片（个人这样理解）

  $(function(){

$('#formbackground').height($window).height();

$('#formbakcground').height($window).width();

})

用来设定背景图根据屏幕尺寸进行变化；

而二维码图片将要放入背景图中的指定位置；

如图位置；

故而采用相对定位；

今天犯错误点：采用绝对定位， 绝对定位无法根据屏幕的尺寸进行调整，页面上面显示的二维码位置错乱~尤其是移动端~

 

三钟position:的定位方式：

  absolute：生成绝对定位，相对于static定位以外的第一个父元素进行定位。 元素的位置通过"left top  right" 以及"bottom"属性进行规定；

fixed:生成相对于浏览器窗口进行绝对定位，元素的位置通过“left top right”以及bottom属性进行规定。

relative:生成相对于父级的位置进行定位，如果left：20px，会根据父级元素的位置进行向左边移动20个像素。

关于javascript语法： object：style：position=“absolute”；