页面8个div定位：调整指定.big元素布局的技术问询

要实现你想要的效果，只需要针对两个容器里的第一个.big元素做定位调整，同时确保容器本身是相对定位的参照体就行，具体步骤如下：

1. 先给容器设置相对定位，让内部的绝对定位元素以容器为基准：

.left-box .container,
.right-box .container {
  position: relative;
}

2. 分别定位两个容器里的第一个.big元素到对应顶部位置：

/* 左边容器的第一个.big 定位到容器左上角 */
.left-box .container .big:first-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* 右边容器的第一个.big 定位到容器右上角 */
.right-box .container .big:first-child {
  position: absolute;
  top: 0;
  right: 0;
}

补充说明 #

• 使用:first-child选择器可以精准选中每个.container下的第一个.big元素，完全不会影响其他.big元素的原有布局；
• 给容器添加position: relative是关键，能让内部绝对定位的.big元素不会跑到页面角落，而是锚定在自己的容器范围内；
• 如果实际需要定位的是.big内部的.box元素，你可以把选择器改成.left-box .container .big:first-child .box，根据自己的DOM结构微调即可。

这样修改后，两个容器的第一个.big元素就会固定在各自容器的顶部，其余元素保持原有布局不变啦。

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