React+SCSS开发作品集时无法调整图片位置，margin、定位等属性均失效求助

问题根源 #

人物图片无法调整位置是因为.sally类当前为默认的static定位，该定位模式下top/right/bottom/left偏移属性不会生效。你之前尝试的fixed定位是相对于浏览器视口定位，所以会打乱全局布局。你的外层.container已经设置了relative相对定位，只需要给人物图片设置absolute绝对定位，就能基于容器调整位置，不会影响其他布局。

修改代码 #

你只需要调整SCSS文件的两处配置即可：

1. 给.container新增最小高度属性，避免子元素绝对定位导致容器高度塌陷，方便定位调整：

.container {
  position: relative;
  min-height: 100vh; /* 新增，撑满整个浏览器视口高度 */
}

2. 修改.sally样式，新增绝对定位、偏移和层级配置，你可以根据自己的设计稿调整right和top的数值：

.sally {
  width: 700px;
  position: absolute; /* 新增，基于外层.container定位 */
  right: 5%; /* 控制左右位置，数值越大越靠左 */
  top: 200px; /* 控制上下位置，数值越大越靠下 */
  z-index: 2; /* 确保人物图片不会被背景wave等元素遮挡 */
}

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