第三十七章 定位(二)

上节课我们讲了 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 的区别还是蛮大,很好记。但是跟下一节要学的就容易混淆了,所以先把今天的记牢再看下一节。

本章代码下载:本章代码

原文链接:https://www.ek58.com/archives/1222,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?