Question

如何在响应式布局中实现绝对定位

背景为一张图片，图中用绝对定位一个按钮，我要如何写代码，才能使按钮的高低不随着页面伸展而变动。
按钮是一个a标签。
代码为
header a.btn_join{ position: absolute; background: url(../images/recover.png) no-repeat; width: 60.8%; background-size: 100% auto; height: 165px; margin:0 auto; left: 0; right: 0; top:60%; max-width: 604px;}
header a.btn_join:active{ background-image: url(../images/recover1.png);}

Answer 1

不随滚动的高度变化得设置position:fixed; 完整的代码：

header a.btn_join{position:fixed; _position:absolute; top:*px; _top:expression(eval(document.documentElement.scrollTop)}

兼容ie浏览器，具体数值自己设定下

Answer 2

position: absolute; 改为fixed

Answer 3

固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。
流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。
自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。