马黑黑 发表于 2022-1-11 17:32

你滚我不滚:fixed定位简介

大家常用到CSS的position定位之 relative 和 absolute ,也就是绝对定位和相对定位,但不知道大家知道不知道除了这两个还有别的定位法,比如 fixed 定位,中文名称是“固定定位”。固定定位(fixed),顾名思义,就像给元素钉了钉子一样,“版”上钉钉了,定了,不走了,换句话说,拖拽滚动条,它还在那里,它不动。

一般来说,CSS可以这么设定元素的 fixed 定位,和 relative | absolute 没什么区别:

方法一:页内CSS + html

<style type="text/css">

. 我定 {
    position: fixed;
    left: 20px;
    top: 20px;
}

<div class="我定">内容</div>

方法二:行内CSS

<div style="position: fixed; left: 20px; top: 20px;">内容</div>

要定位,先声明定位方式(position: fixed),再设定左右值。

马黑黑 发表于 2022-1-11 17:32

<style type="text/css">
.cDiv {
        width: 200px;
        border:1px olive;
        background: rgba(0,0,0,0.8);
        color: #eee;
        padding: 10px;
        position: fixed;
        left: 10px;
        top: 20%;
}
</style>

<div class="cDiv">
        <pre>核心CSS代码:

        position: fixed;
        left: 10px;
        top: 20%;
        </pre>
</div>

马黑黑 发表于 2022-1-11 17:33

看左边的方框,本页怎么滚动,它都丝纹不动

加林森 发表于 2022-1-11 18:49

新教程真好。{:4_199:}

红影 发表于 2022-1-11 18:59

这个板上钉钉厉害了,页面滚到最下面了,这个框还是跟着的{:4_173:}

马黑黑 发表于 2022-1-11 22:12

红影 发表于 2022-1-11 18:59
这个板上钉钉厉害了,页面滚到最下面了,这个框还是跟着的

不是跟着走,它根本不动

马黑黑 发表于 2022-1-11 22:14

加林森 发表于 2022-1-11 18:49
新教程真好。

队长晚上好

马黑黑 发表于 2022-1-11 22:15

@东篱闲人 ,这个好像你可以用用

加林森 发表于 2022-1-12 08:38

马黑黑 发表于 2022-1-11 22:14
队长晚上好

老黑上午好!

东篱闲人 发表于 2022-1-12 09:44

马黑黑 发表于 2022-1-11 22:15
@东篱闲人 ,这个好像你可以用用

这个太好了,俺必须得试试,谢谢黑老师。。。{:5_108:}

东篱闲人 发表于 2022-1-12 09:50

很好用。就是俺得想想怎么用,这个做音画不行,它不跟着帖子走。。。{:5_117:}

马黑黑 发表于 2022-1-12 10:48

东篱闲人 发表于 2022-1-12 09:50
很好用。就是俺得想想怎么用,这个做音画不行,它不跟着帖子走。。。

想象一下,发个通知,放个播放器,如何呢

马黑黑 发表于 2022-1-12 10:48

东篱闲人 发表于 2022-1-12 09:44
这个太好了,俺必须得试试,谢谢黑老师。。。

俺可是人黑心不黑

红影 发表于 2022-1-12 16:57

马黑黑 发表于 2022-1-11 22:12
不是跟着走,它根本不动

嗯嗯,是我的说法有误,它还是在原地。

马黑黑 发表于 2022-1-12 17:42

红影 发表于 2022-1-12 16:57
嗯嗯,是我的说法有误,它还是在原地。

记得fixed 就是“版”上钉钉的固定

红影 发表于 2022-1-12 19:10

马黑黑 发表于 2022-1-12 17:42
记得fixed 就是“版”上钉钉的固定

这个命令太厉害了,可以克服所有的束缚。

马黑黑 发表于 2022-1-12 20:33

红影 发表于 2022-1-12 19:10
这个命令太厉害了,可以克服所有的束缚。

CSS设置这些东西都是根据现实需要的

红影 发表于 2022-1-12 21:24

马黑黑 发表于 2022-1-12 20:33
CSS设置这些东西都是根据现实需要的

能设置这个出来的人,很细心。

东篱闲人 发表于 2022-1-13 10:45

马黑黑 发表于 2022-1-12 10:48
俺可是人黑心不黑

都一样。。。。{:5_116:}

马黑黑 发表于 2022-1-13 12:15

东篱闲人 发表于 2022-1-13 10:45
都一样。。。。

同类项?
页: [1] 2
查看完整版本: 你滚我不滚:fixed定位简介