我想达到下面所述的效果
页面分两大块儿，①所指的p宽度固定，高度不固定，居中
p
②所指的p要紧贴着①；并且不随着页面的滚动而滚动【或者说②处于浏览器窗口固定的位置】；
我所不能解决的问题
如果对②使用position：fixed，那么当浏览器窗口不固定的时候，如何才能让它紧贴着①；或者说②的left或right属性怎么取值？
position：fixed
left
right
有想过浏览器窗口宽度发生变化时，用js去调整②的left或right取值。。。
大家有什么技巧来实现这种效果吗
走同样的路，发现不同的人生
<style type="text/css"> *{ margin:0; padding:0; } p{ width:1000px; height:auto; background:green; margin:0 auto; position:relative; } h1{ width:100%; height:200px; } p{ width:200px; height:200px; background:red; position:fixed; left:50%; top:50%; margin:-100px 0 0 500px; } </style> </head> <body> <p> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>1</h1> <h1>2</h1> <h1>3</h1> </p> <p></p>
不知道你要是不是这样，如果你的整体宽度大于1366的话，可能你就要缩小中心的那个板块宽度，那么久需要用一点JS （还有就是fixed 兼容到IE7， 如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了）
把 2 放到 1 中，用定位使其位置溢出到 1 右边。
我觉得应该只能用js去解决了jquery的代码如下
//监视窗口大小变动事件 $(window).resize(function (){ var ①=$("①") var ①offset=①.offset(); //用元素距离左面的像素+元素本身的宽度 var ②left=①offset.left+①.outerWidth() $("②").css('left',②left) }) //在页面加载完毕之后手动执行一下reszie事件 $(window).trigger('resize')
(楼上正解)如果不考虑兼容性，还可以这样：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <p class="main"></p> <p class="aside"></p> </body> </html>
$mainWidth: 240px; $asideWidth: 100px; html,body { margin: 0; box-sizing: border-box; } .main { margin: 20px auto; width: $mainWidth; height: 4000px; border: 1px solid #333; } .aside { position: fixed; top: 200px; right: 0; left: 0; margin: auto; width: $asideWidth; height: 100px; border: 1px solid #333; transform: translateX(($mainWidth+$asideWidth)*.5+10px); }
结果展示：http://codepen.io/huangxutao/pen/VjawEO/
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
不知道你要是不是这样，如果你的整体宽度大于1366的话，可能你就要缩小中心的那个板块宽度，那么久需要用一点JS （还有就是fixed 兼容到IE7， 如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了）
把 2 放到 1 中，用定位使其位置溢出到 1 右边。
我觉得应该只能用js去解决了
jquery的代码如下
(楼上正解)如果不考虑兼容性，还可以这样：
HTML
SCSS
结果展示：
http://codepen.io/huangxutao/pen/VjawEO/