css position fixed 左右双定位的实现代码

当我们使用CSS进行网页布局时，常常需要将某个元素固定在浏览器窗口的某个位置，比如将导航栏固定在屏幕的顶部让其不随页面滚动而改变位置，这时候就需要用到CSS的position属性，并设置为fixed，再通过设置left和right属性来实现左右双定位。下面是实现的完整攻略：

设置元素为fixed定位

在CSS中，我们可以通过设置position属性的值为fixed来将元素设置为固定定位，这将使元素脱离文档流，不再占用文档的空间，并且始终固定在浏览器窗口的某个位置。

position: fixed;

设置left和right属性来实现左右双定位

在将元素设置为fixed定位后，我们可以通过设置left和right属性的值来调整元素在浏览器窗口中的水平位置。

例如，将一个宽度为400px的弹窗居中显示，可以设置left和right属性的值为50%以及margin-left和margin-right属性的值为弹窗宽度的一半，如下所示：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 300px;
  margin-top: -150px;
  margin-left: -200px; /* width的一半 */
  margin-right: -200px; /* width的一半 */
}

类似地，我们也可以将一个导航栏固定在屏幕的左侧或右侧，代码示例如下：

.navbar-left {
  position: fixed;
  top: 30%;
  left: 0;
}

.navbar-right {
  position: fixed;
  top: 30%;
  right: 0;
}

上述代码中，.navbar-left和.navbar-right分别将导航栏固定在了浏览器窗口的左侧和右侧。通过设置相应的top属性值，可以将它们垂直居中。