你不知道的CSS---position小技巧

Posted 2022-08-15 我不是药神

众所周时"position: sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。

回顾 position values

position中目前有五个值分别是static、relative、absolute、fixed、sticky。使用场景分别如下：

• static: 此值为默认值，元素仍然隶属于文档流，此时不受left、z-index等属性控制。
• relative: 此值配和left等属性可以改变元素在页面中的位置，但不会影响其他元素，因为原位置仍会空白保留。
• absolute: 此值与前两个有本质上的区别，因为他会讲元素移除文档流。因此，后边的元素会占据改元素的位置。此外，被移除的元素所依旧的定位位置来自于第一个非static值的祖先级元素。
• fixed: 此值也会被移除文档流，但是根据定位的元素时窗口。所以打印时候，会出现在每一页上面。
• sticky: 此值较为复杂，大家可以先理解为sticky + fiexd的组合，接下来我们着重分析它。

聚焦 sticky

为什么要单独拿出来sticky来讲,因为它确实是position values中最抽象、隐晦的。这也造成学习成本加大，使用频率变低。要想说明白他是如何生效的？那就需要知道下面这三个要素。

1. nearest scrolling ancestor。sticky元素最近的滚动祖先是谁，这决定了sticky将会对谁相对定位，也可以理解为对谁使用了fixed。
2. nearest block-level ancestor。最近的块级元素，它则限制了sticky一定要在里面出现。也就是说即使sticky元素对窗口进行了top: 96px定位。但是他的块级元素，已经被滚动出窗口，此时该元素也不会被fixed在窗口之内，更不会距离顶部96px;
3. stacking context。上面两条是使用必知的话，这条就是z-index生成条件必知。也就是说sticky会和"postion: absolute/fixed;"一样。产生层叠上下文。这样也解释了，为什么可以向fiexd一样固定在窗口内。

   一种意想不到的使用场景

   由CSS-position解决的场景不计其数的话，那这种使用方式一定知道的人会少很多。

解决场景：项目有一些老组件，现在业务要求给这些组件内部加一个footer，然后可以在footer放些按钮。

方案1: 相信大家一般都会去改动每个组件dom去实现这个功能。\\
方案2: 其实只需要使用fixed同样修改就可以了。首先：写一个footer组件，是这个组件使用fiexd布局即可，然后每个组件你只需要把现在内容区高度减小footer的高度即可。

具体实现如下：

footer组件

// jsx部分
const  Button  = require("antd")

const footer = () => 
    return <div>
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
        <Button>4</Button>
    </div>


// less 部分
.footer 
    position: fixed;
    bottom: 0;
    height: 60px;

所有要加footer的组件

.per-component 
    height: calc(600px - 60px); // 600px: 替换成你自己组件高度，需要加footer组件的都需要修改高度
    transform: translateX(0); // 此处为本方案核心： 使footer相对于该组件定位而不是窗口

结语

周末不歇业，不加班，但要学习。愿明天的自己，感谢今天努力的自己。

莫待萧萧两鬃丝！——朱学勉