css - 位置固定的元素充当绝对位置

Question

.second{
    width: 150px;
    height: 150px;
    border: 2px solid red;
}
.first{
    position:fixed ;
	top: 0;
}

	

<div class="container">
    <div class="first">
        <li>fff</li>
    	<li>fff</li>
    	<li>ff</li>
    	<li>fff</li></div>
    <div class="second"></div>
</div>

如何避免将“second”定位在“first”容器之上？我想将两个容器并排放置(第一->左；第二->右)。位置固定后，我想应用粘性属性。

Answer 1

你可以使用 CSS flex-box 来构建你想要的东西;)

.container {
  display: flex;
}

.first {
  width: 150px;
  height: 150px;
  border: 2px solid blue;
}

.second {
  width: 150px;
  height: 150px;
  border: 2px solid red;
}

<div class="container">
  <div class="first">
    <ul>
      <li>fff</li>
      <li>fff</li>
      <li>ff</li>
      <li>fff</li>
    </ul>
  </div>

  <div class="second"></div>
</div>