• css：html元素的定位

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

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

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

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

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

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

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

    固定定位

    给元素设置固定定位：

    div{
    position: fixed;
}

    • 1
    • 2
    • 3

    再通过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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

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

    在这里插入图片描述

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

    绝对定位

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

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

    相对定位

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

    小提示：

    相对定位中的top、right、bottom和left属性并不能改变元素的大小，它们仅仅改变元素的位置。另外，top和bottom不能同时使用，因为bottom会被忽略，同样left和right也不能同时使用，因为right会被忽略。

    我们在页面布局中，常常使用相对定位来给它的子元素的绝对定位创建一个包含块。

    重叠和z-index

    在使用定位的时候，经常会出现元素重叠或者元素移动到浏览器视口之外。

    元素移动到视口之外，这个好理解，但是元素重叠，就不太容易找到本质原因了。

    可能在面试时，我们常常给的答案是元素设置定位后，可能导致它脱离文档流，它和周边的元素就不处在同一个层次，就导致在视觉出现重叠的效果。

    实质上是，浏览器在将html解析为DOM的同时，还创建了一个树形结构，叫做渲染树，它表示每一个元素的视觉样式和位置，同时决定了浏览器绘制元素的顺序。

    通常情况下。元素在html里面出现的顺序决定了绘制顺序，这时，突然有个元素被设置定位了，浏览器先绘制非定位元素，所有的定位元素最后才绘制，这样就导致元素的顺序错乱而产生了重叠现象。

    尽管出现重叠现象，我们可以通过设置z-index，来控制元素的层叠顺序。

    粘性定位

    粘性定位是相对定位和固定定位的结合体，通常情况下，元素是会随着页面滚动的，当达到屏幕的某个位置的时候，元素就固定在该位置。常见就是侧边栏、客服弹窗。

    通过设置position:sticky，实现粘性定位，但是可能有些浏览器还没有支持这个属性，那就只有通过固定定位来实现了

    这就就是我们常用的定位

  • 相关阅读:
    修改原生checkbox的样式
    R语言实践——rWCVP：世界维管植物名录的R包
    正点原子STM32(基于HAL库)5
    自适应前照灯系统控制器AFS
    Webmin -- Webmin Users
    blender中的灯光和相机
    项目管理中，如何建立里程碑式管理？
    你真的会数组去重吗？去重方法汇总解析，看着一篇就够了
    Android优化RecyclerView图片展示：Glide成堆加载批量Bitmap在RecyclerView成片绘制Canvas，Kotlin（b）
    TCP百万并发服务器优化调参
  • 原文地址：https://blog.csdn.net/xuelian3015/article/details/126355794