将一个盒子固定到版心右侧

最新推荐文章于 2024-02-26 19:54:59 发布

原创最新推荐文章于 2024-02-26 19:54:59 发布 · 799 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css #定位

固定定位小技巧专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种方法将一个盒子固定在版心右侧，适用于网页布局设计。首先，通过设置元素的`position: fixed`和`left: 50%`使其占据浏览器宽度一半。其次，利用`margin-left`属性调整盒子位置，使其相对于版心对齐，这里假设版心宽度为800px，因此设置`margin-left: 400px`。此技巧需要预先设定版心盒子的宽度。

将一个盒子固定到版心右侧
1.走浏览器宽度的一半
2.利用margin走版心宽度的一半
注：这两种方法必须给版心盒子设置宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位小技巧-固定到版心右侧</title>
    <style>
    .w{
      width: 800px;
      height: 1200px;
      background-color: pink;
      margin: 0 auto;
    }
    .fixed{
      position: fixed;
      /* 1.走浏览器宽度的一半 */
      left: 50%;
      /* 2.利用margin走版心宽度的一半距离 */
      margin-left: 400px;
      width: 50px;
      height: 160px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子800像素</div>
</body>
</html>