(css)绝对定位如何在不同分辨率下的电脑正常显示位置？

                     关于网友提出的“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？
”问题疑问，本网通过在网上对“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题： (css)绝对定位如何在不同分辨率下的电脑正常显示位置？ 描述:

绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，大家有什么好的解决方法么？
（之所以用绝对定位是因为项目是一个活动页面，有不同的按钮 位置不一，不是要让某个元素居中之类的）
如果用媒体查询，但是要写很多分辨率下的css样式，感觉不太实际？绝对定位用像素和百分比都会错乱。
望有遇到过类似问题的大神指点一二！！！

这是不同分辨率下同一个绝对定位的div显示位置，笔记本电脑分辨率低 1360*768，显示的浏览器网页样式差不多为大屏显示器1920分辨率网页放大到150%左右的样子。

---

解决方案1:

外部的div可以给一个相对比较安全的宽度比如1200PX，作为背景并且相对定位，然后那颗树绝对定位，里面的子元素再绝对定位，这样就OK了

解决方案2:

我自己一般都是先确定一个要适配的最小宽度，比如是1366，然后从最外层开始，main页面容器width100%，article内容容器给个max-width1366px，宽度也是width100%，相对定位，然后用margin-left:auto;和margin-right:auto;做居中，再到里边的内容块，大的布局主要用相对定位做，小的再用绝对定位，一般只做pc端的话很少需要下断点的。

解决方案3:

直接写死中间内容区域的宽度（1000px或者996px或者其他的）
父容器（body或者div）用width:100%
对圣诞树（整棵树）也固定它的高宽
最后对礼物做相对定位处理
这样的界面应该不适合去做适配和响应式（不是大牛....只是个人直觉）

解决方案4:

我看网上说可以给页面定义zoom缩放比例，根据不同的浏览器分辨率来定义缩放比率。
我自己写了段简单的js，先获取当前窗口的屏幕分辨率的宽度，如果自己的页面是以1920做的，则给当前需要缩放的容器加一个zoom属性。

 $(function(){        
        var w=window.screen.width;        
        var zoom=w/1920;
        $("#container").css({
             "zoom",zoom,
             "-moz-transform":"scale("+zoom+")",
    　　　　　"-moz-transform-origin":"top left"
         });
  });

这样因为这个页面整体元素很多都是定位的，就可以一起整体缩小了。
因为分辨率低了之后，相当于把1920的页面放大看了，所以要给它一个缩放比率，
zoom:当前屏幕分辨率宽度/1920;

zoom是一个缩放属性，但是火狐不支持该属性，所以网上迂回的做法为scale缩放。
这个原理类似手机端要加一段js判断屏幕分辨率来使手机端页面缩小相应倍数一样。
但是scale缩放与zoom缩放并不相同，zoom在页面原始宽高的基础上缩放到自适应当前分辨率，而transform:scale是在页面已经按原来比例显示出来之后再进行缩放，这样缩放会两边留很大白边，且定位不会跟着变化。

最终推荐方法则是写一个安全宽度的div来作为相对定位的父元素。

解决方案5:

使用百分比控制 left right top bottom

解决方案6:

使用calc可以用百分比和像素同时定位

题： (css)绝对定位如何在不同分辨率下的电脑正常显示位置？

width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);

解决方案7:

你可以考虑，用用弹性盒子
display;flex;在规定子级占用多大，
弹性盒子可以根据宽的多少自动分配的

解决方案8:

总感觉是因为你的父级元素写得不够恰当导致的...
背后那一棵树的大小应该是固定的,然后是相对定位..
里面所有的礼物都是相对这个树的绝对定位..
这样应该就没问题了..只要树的位置是对的礼物的位置应该也是对的

以上介绍了“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www./itwd/4175199_2.html