Position absolute在<section>区块中失效问题求助

这问题我太熟啦！绝对定位的元素是找最近的非static定位的父元素作为定位参考的，你当前的<section>用的是默认的position: static（也就是没显式设置position属性），所以.logo会相对于整个页面的初始包含块来定位，自然就跑到页面最右侧去了。

解决方案 #

给你的<section>添加position: relative;样式，这样内部的绝对定位元素就会以<section>为定位上下文，不会再乱跑了。

修改后的完整代码 #

body { background: rgb(204, 204, 204); }
img { width: 150px; }
.logo { right: 0px; top: 10px; position: absolute; display: block; }
section { 
  background: white; 
  display: block; 
  margin: 0 auto; 
  margin-bottom: 0.5cm; 
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  position: relative; /* 新增这一行，提供定位上下文 */
}
section[size="A4"] { width: 21cm; height: 29.7cm; }
@media print { body, section { margin: 0; box-shadow: 0; } }

<section size="A4"> 
  <div class="logo">
    <img src="https://vignette.wikia.nocookie.net/logopedia/images/e/eb/BBC.svg/revision/latest/scale-to-width-down/250?cb=20170913090831">
  </div> 
</section>

原理说明 #

position: relative不会改变<section>本身的布局位置，只是为它内部的绝对定位元素创建一个定位上下文，让这些元素的top/right/bottom/left属性都相对于这个父元素来计算，刚好满足你把logo放在section右上角的需求~

内容的提问来源于stack exchange，提问作者user1038814