如何将Flex布局中的指定Div固定在右上角？

嘿，这个需求其实很好解决，咱们可以把Flex布局和绝对定位结合起来用——毕竟Flex是管流式排列的，而绝对定位刚好能帮咱们把那个元素死死“钉”在右上角，而且不会打乱其他元素的正常布局。

具体实现步骤： #

• 首先给父容器.wrapper添加position: relative;，这样后续子元素的绝对定位会以这个父容器为参考基准，而不是整个页面。
• 然后给.sticked类添加绝对定位样式，设置top: 0; right: 0;，让它紧贴父容器的右上角；如果父容器有内边距，你可以调整这两个值或者用更简洁的inset: 0 0 auto auto;来实现同样效果。

修改后的完整代码： #

.wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  position: relative; /* 添加相对定位 */
  /* 给父容器加个边框+内边距，方便看效果 */
  border: 1px solid #ccc;
  padding: 10px;
}
.content { 
  height: 100px; 
  width: 100px; 
  border: 1px solid; 
  margin: 5px; /* 加个外边距让元素间距更美观 */
}
.sticked { 
  height: 200px; 
  background: red; 
  position: absolute; /* 添加绝对定位 */
  top: 10px; /* 和父容器padding对应，避免贴在边框上 */
  right: 10px;
}

<div class="wrapper">
 <div class="content">Content 1</div>
 <div class="content">Content 2</div>
 <div class="content">Content 3</div>
 <div class="content">Content 4</div>
 <div class="content">Content 5</div>
 <div class="content">Content 6</div>
 <div class="content">Content 7</div>
 <div class="content">Content 8</div>
 <div class="content">Content 9</div>
 <div class="content">Content 10</div>
 <div class="content">Content 11</div>
 <div class="content">Content 12</div>
 <div class="content">Content 13</div>
 <div class="content">Content 14</div>
 <div class="content">Content 15</div>
 <div class="content sticked">Div in Upper Right Corner</div>
</div>

补充说明： #

用绝对定位的好处是，这个带sticked类的元素会脱离Flex布局的流，不会挤占其他元素的位置，完美符合你想要它固定在右上角、不影响其他内容排列的需求。如果后续你想调整它的位置，只需要修改top和right的值就可以啦。

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