css：html元素的定位

原创

我的代码呢 2022-10-28 04:57:19 博主文章分类：深入浅出CSS ©著作权

文章标签 css html javascript 相对定位文档流 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者我的代码呢的原创作品，请联系作者获取转载授权，否则将追究法律责任

html元素的定位类型分为：固定定位、相对定位、绝对定位和粘性定位

在网页布局中，我们可以通过很多中方式来控制页面布局，比如表格布局、flex弹性布局以及浮动布局。

但是在这些方法中，我们可能用到了一些辅助技术，那就是定位。

元素的定位，用得好，就会带来事半功倍的效果，但是一不小心也会给自己挖坑，自己踩坑。

这就需要我们了解各种定位类型中的行为了。

我们给元素设置定位，是通过position属性来设置的，它默认的属性值是static，也就是静态定位，元素未被定位。

我们常用的几种布局方式，都是通过控制文档的方式，来实现我们想要的效果。然而定位则不同，定位是把元素脱离文档流，这样就导致被定位的元素可以与其他元素重叠。

固定定位

给元素设置固定定位：

div{
    position: fixed;
}

再通过top、left、right和bottom四个属性，就可以将元素固定到屏幕中的任意位置。

然而这四个属性的设置，在背后却暗暗定义了元素的宽高：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hhh {
            position: fixed;
            top: 2rem;
            left: 2rem;
            right: 2rem;
            bottom: 2rem;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="hhh"></div>
</body>

</html>

如以上代码中，元素div并没有设置具体的宽高。但是效果如图：

css：html元素的定位_javascript

那么在平常的页面布局中，常常使用来固定定位来实现：模态框、悬浮菜单或者悬浮导航等等效果。

绝对定位

决定定位，是相对于最近的祖先定位元素。同样的，属性top、right、bottom和left决定了元素的边缘位置。

经常和相对定位搭配使用。

相对定位

相对定位，是一个比较容易混淆的定位，因为我们给元素设置相对定位后，在页面中没有任何的视觉变化，相对定位的元素和它周围的元素，保持着原本的位置。
就算是设置top、left和right、bottom，效果也仅仅是将相对定位的元素移动位置，其他元素依旧没有变化。这样我们就可以认为相对定位，并没有让元素脱离当前文档流，元素依旧占据文档流中的位置。