开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十三天,点击查看活动详情

深入解析CSS(第N天)

定位

定位不出意外应该是我们熟悉不能再熟悉的一个词了,初学css时就会常常听到某站的老师说相对定位,绝对定位,子绝父相,搞懂定位你就搞懂了布局,一招找你解决定位难题各种各样的,可能很多开发者都对这个已经了解了,所以我就讲讲我对定位的理解和看法.不过基础的理论还是要写出来的

position

首先在学习,第一时间必然是先让你了解一下position有那些属性,然后再对每个属性进行讲解及其使用,在后面还会教大家为什么要子绝父相,注意事项又是那些

首先position主要有static(静态定位),fixed(固定定位),absolute(绝对定位),relative(相对定位)和sticky(粘性定位)

static(静态定位)

这个就没有好说的,这个就是默认值,正常的定位

fixed(固定定位)

固定定位不如其他定位类型用得普遍，但它是最好理解的一种定位类型，因此我先从它开始介绍。给一个元素设置position: fixed就能将元素放在视口的任意位置。这需要搭配四种属性一起使用：top、right、bottom和left。这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。比如，top: 3em表示元素的上边缘距离视口顶部3em。

实例

制作一个固定的导航栏,这个或许比较很容易实现,但是可能会遇到很多问题,我们先一步一步来

<div class="header">
        <div>
            <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
                alt="稀土掘金" class="logo-img" data-v-250c3156="">
        </div>

        <div>首页</div>
        <div>沸点</div>
        <div>课程</div>
        <div>直播</div>
        <div>活动</div>
        <div>商城</div>
        <div>APP</div>
        <div>插件</div>
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19e7f58eecbd497c92397344e1d489a6~tplv-k3u1fbpfcp-zoom-1.image"
            style="max-width: 115px; vertical-align: middle" data-v-250c3156="">
        <div><input type="text" /></div>
        <div><button>创作者中心</button></div>
        <div><button>会员</button></div>
        <div>头像</div>
    </div>
    <div class="content">
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
        <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
         <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
          <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
           <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
            <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
             <div style="margin:50px 0;background-color: aquamarine;">1231312</div>
    </div>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            position: fixed;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            background-color: #eee;
            width: 100%;
            height: 60px;
            top: 0;
        }
    </style>

我们会发现固定是固定了但是很明显有一部分被遮住了,这显然不是我们想要的结果,这时就需要外嵌一个容器并设置高度即可解决这个问题

absolute(绝对定位)

固定定位让元素相对视口定位，此时视口被称作元素的包含块（containing block）。声明left:2em则将定位元素的左边放在距包含块左侧2em处。绝对定位的行为也是如此，只是它的包含块不一样。绝对定位不是相对视口，而是相对最近的祖先定位元素。跟固定元素一样，属性top、right、bottom和left决定了元素的边缘在包含块里的位置。在设置绝对定位时一定要确保最近的祖先定位元素有固定的宽高不然会出现下面这种情况

当我们设置了父类高度后

relative(相对定位)

相对定位可能是最不被理解的定位类型。当第一次给元素加上position: relative的时候，你通常看不到页面上有任何视觉改变。相对定位的元素以及它周围的所有元素，都还保持着原来的位置（尽管你可能会看到某些元素跑到另一些元素前面，我后面会解释这个问题）。如果加上top、right、bottom和left属性，元素就会从原来的位置移走，但是不会改变它周围任何元素的位置。如图7-4所示，四个inline-block元素，给第二个元素加上三个额外的属性：position: relative、top: 1em、left: 2em，将其从初始位置移走，但是其他元素没有受到影响。它们还是围绕着被移走元素的初始位置，跟随着正常的文档流。

sticky(粘性定位)

这个定位可能很多初学者用的比较少,但是他确实还是比较常见的,它是相对定位和固定定位的结合体：正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时，如果用户继续滚动，它就会“锁定”在这个位置。最常见的用例是侧边栏导航。

掘金的就是通过sticky实现的,不过这个要考虑兼容性