CSS Positions布局的实践技巧与经验分享

<div class="container">
  <div class="centered-element">我是居中的元素</div>
</div>

.container {
  position: relative;
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<nav class="fixed-navbar">
  <ul>
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
    <li>联系我们</li>
  </ul>
</nav>

.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.fixed-navbar ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.fixed-navbar ul li {
  margin: 0 20px;
}

<div class="waterfall-layout">
  @@##@@
  @@##@@
  @@##@@
  @@##@@
  @@##@@
</div>

.waterfall-layout {
  position: relative;
  column-count: 3;
  column-gap: 10px;
}

.waterfall-layout img {
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 10px;
}

.waterfall-layout img:nth-child(odd) {
  position: absolute;
  left: 0;
  margin-bottom: 0;
}

.waterfall-layout img:nth-child(even) {
  position: absolute;
  right: 0;
  margin-bottom: 0;
}