离线下载
获取电子书

稻米鼠 · 更新于 2018-02-24 13:01:00

第三十七章 定位(二)

上节课我们讲了 fixed 定位,那么现在我们来简单回顾一下他。fixed 定位就是锁定元素和浏览器的相对位置,无论怎么滚动页面,这两者之间是相对静止的。然后还有一个细节上一节我们没有注意哦!

fixed 定位的元素不在文档流内!这只箱子从传送带上拿出来了,挂在浏览器上一动不动的。所以他和传送带上的箱子互不影响,传送带上也没有他的位置。

然后再来认识一个新的定位方式:relative,不解释,先看例子再说话。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relative 定位实例</title>
    <style>
        div {
            width: 50%;
            height: 200px;
            float: left;
            color: #FFF;
            font-size: 48px;
            text-align: center;
            line-height: 200px;

        }
        #a {
            background: #C00;
            position: relative;
            left: 100px;
            top: 100px;
        }
        #b {
            background: #0C0;
        }
        #c {
            background: #00C;
        }
        #d {
            background: #CC0;
        }
    </style>
</head>
<body>
    <div id="a">我是那个被定位了的格子</div>
    <div id="b">我是打酱油的格子,老大</div>
    <div id="c">我是打酱油的格子,老二</div>
    <div id="d">我是打酱油的格子,老三</div>
</body>
</html>

这些代码不多说,都知道怎么回事,除了这个定位方式,看了效果我们来说。

如果没有定位,就是这四个格子排排坐,但是不给果果吃,所以无聊的很。但是我给第一个元素做了 relative 定位,这是啥意思呢?就是叫这排排坐的某一位小朋友出来唱个歌。唱完他还回去坐,对吧,所以他的位置要留着,不能他出来唱歌别的小朋友就坐过去,要不然唱完歌回来发现没位子了要哭的。所以你看后面的小朋友还都坐在那里,虽然前面有了一个空着的位置。

然后呢,去唱歌的小朋友站在舞台上,他不会影响到坐着的那些小朋友,虽然我们看到他挡住了后面坐的的小朋友,但是只是视线上的遮挡,并不会发生什么肢体上的冲突,否则……去看演唱会什么的也太爽了点。

然后就是位置问题,其实也挺简单的,left 就是现在位置的左边缘距离原来位置的左边缘的距离。就是老师说,小红,来,起来给大家唱个歌,从你座位开始,向前走两步,再向右走三步,站在那里唱(这个老师是个逗[哔~])。那么小红唱歌的位置跟她坐着的时候左手移动的距离是三步,而后背移动的相对距离是两步,这都很好理解。

那么,现在我们知道了 relative 的定位方式,在文档流中保留原有位置,然后基于原来的位置进行偏移。现在仔细想想,跟 fixed 的区别还是蛮大,很好记。但是跟下一节要学的就容易混淆了,所以先把今天的记牢再看下一节。

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me