如何使.container元素的边框向上微调且不带动body的边框？

原始代码 #

CSS

body {
  outline: 3px solid blue;
  height: 100vh;
  outline-offset: 5px;
}

.container {
  border: 2px solid red;
  height: 610px;
  width: 350px;
  transform: translateY(30px);
}

HTML

<body>
  <div class="container"></div>
</body>

你需要让.container的边框向上移动，同时不影响body的边框布局，以下是几种可行方案：

方案1：使用负的transform: translateY() #

transform是纯视觉层面的位移，不会改变元素在文档流中的占位，因此完全不会影响body的布局。只需将原来的正值改为负值即可实现上移：

.container {
  border: 2px solid red;
  height: 610px;
  width: 350px;
  transform: translateY(-10px); /* 调整负值大小控制上移幅度 */
}

方案2：使用相对定位position: relative + top负值 #

相对定位同样属于不改变文档流的视觉位移，效果和transform类似：

.container {
  border: 2px solid red;
  height: 610px;
  width: 350px;
  position: relative;
  top: -10px; /* 调整负值大小控制上移幅度 */
}

方案3：使用负的margin-top #

如果需要让.container在文档流中也占据上移后的位置（比如后续添加的元素会跟着上移），可以用margin-top负值，这种场景下也不会影响body的边框：

.container {
  border: 2px solid red;
  height: 610px;
  width: 350px;
  margin-top: -10px; /* 调整负值大小控制上移幅度 */
}

注意 #

前两种方案（transform和relative定位）不会改变元素的文档流占位，只会让.container视觉上移动，是最推荐的方式，完全满足你“不带动body边框移动”的需求。

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