为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/初识HTML(5)+CSS(3)-升级版

对“偏移前的位置保留不动”这句话还是不太理解，求问

“从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。”

本来例子中相对定位作用的元素就是div，span中的内容肯定是不动、保持原来位置的啊，为什么这里还要刻意说明这一点呢？难道在其他的定位中有span跟着div一起动的情况吗？span不是在div中而是在div外



Gaberial

2018-07-26

源自：初识HTML(5)+CSS(3)-升级版  13-7

关注问题 我要回答
1632
操作
收起

正在回答

3 回答

Qnull 回答被采纳 +2 积分
2018-07-26

https://img1.sycdn.imooc.com//5b59d3a200015db611060576.jpg

https://img1.sycdn.imooc.com//5b59d3a3000180cd11030567.jpg

使用absolute时，<span>标签里的元素和<div>是分别在两个层里，而且很明显absolute定位方式元素所在层在未设置定位方式的<span>标签元素所在层的上方，因而覆盖（遮住）了下方的元素。而relative方式，该元素即使后面更改了其位置，该元素最开始创建时所在的位置仍然保留。即不改变元素所在层级，依旧在同一层。要重点理解  层 的概念。可以百度一下Photoshop中“层”的概念

4 回复 有任何疑惑可以回复我~
收起回答
#1

Gaberial 提问者

div不是块状元素吗？为什么上面第一张图中span中的内容可以和div在同一行？不应该是像图二一样另外换行吗？
2018-07-27 回复 有任何疑惑可以回复我~
#2

Gaberial 提问者

刚才试了一下，建了两个div颜色框，发现在绝对定位时总可以用一个框覆盖另一个框的颜色，但是在用相对定位时，一个框永远无法越过另一个框而覆盖在/遮在上面。请问这是上面说的情况吗？？但是，“偏移前的位置保留不动”，这一点又是如何体现的？
2018-07-27 回复 有任何疑惑可以回复我~
#3

Gaberial 提问者

因为我们一开始就定义了用了相对定位的div的位置，后面又没有修改，为什么有偏移前偏移后的说法？
2018-07-27 回复 有任何疑惑可以回复我~
#4

Qnull 回复 Gaberial 提问者

OK、首先、在任何元素都不设置任何定位方式时、都是在一个层（假设我们定义这个默认层为 level0 ) 图一中由于 <div>标签设置了定位为absolute、那么这个<div>就被放置在另了另一个层（假设定义叫level 1）level 0 和 level 1在页面中、是严格对齐。因此图一中两者出现了重合（下层元素被覆盖）的现象。因为我设置的位置都可以被认为在第一行、只不过是两个层级的第一行
2018-07-27 回复 有任何疑惑可以回复我~
#5

Qnull 回复 Gaberial 提问者

既然这样、那你设想、你在桌子上摆了一本书（level-one 书体透明）、默认情况下你摆的任何元素都在这个level-one表面上。每个元素都是同一级别的、不可以被覆盖、只能一个挨着一个。然后有一个元素你想改变它定位方式为absolute、那么此时你就得重新拿一本书（level-two）盖着最开始的书上面、然后在上面放元素。 relative定位方式则是你第一本书上左上角按顺序依次往下摆三个方块、现在你要改变最上面的方块、往右偏移一个 em位置（em在css中表示这个物体100%的位置大小、假设是一个字体16px,则使用em表示移动16px,2em表示移动32px)则第一个方块----未完
2018-07-27 回复 有任何疑惑可以回复我~
#6

Qnull 回复 Qnull

----接上—> 的最开始的位置依旧被保留（没有其他元素占据这个位置）那么这个地方则是透明的、会显示这个层下面层的对应位置内容。 使用absolute、默认建立的层是在 最初的层的上层。如果你想让absolute层移到默认层的下方、既absolute层的东西被relative层的东西覆盖住。你可以在你要设置的元素下加上 z-index : n (n表示为 负数到正数中任一一个整数）既设置了改层的层级
2018-07-27 回复 有任何疑惑可以回复我~
#7

Gaberial 提问者 回复 Qnull

感谢你的耐心回答，我先好好看看！
2018-07-27 回复 有任何疑惑可以回复我~
#8

Gaberial 提问者 回复 Gaberial 提问者

（刚看到回复）
2018-07-27 回复 有任何疑惑可以回复我~
#9

Gaberial 提问者 回复 Qnull

这样理解可以吗？ 1.对于相对定位，所谓的“偏移前”指的是未赋予这个元素定位属性时该元素最初的位置，只有赋予定位属性后才可以相对自身最初的这个位置发生偏移 2.看w3c手册的时候有“脱离文档流”这个说法。请问这里的文档流就是举例中的lv1，而“脱离文档流”意思就是脱离了原本的lv1后到达lv2对吗？所以某元素设置了绝对定位属性后，它可以覆盖/遮挡表层（lv1）的内容。
2018-07-27 回复 有任何疑惑可以回复我~
#10

Gaberial 提问者 回复 Qnull

3.设置绝对定位时，其他的元素会填补原有的空白，而设置相对定位时，原有的空白处仍然占据空间，即使有空白，后面的元素也不会挤上来。那是不是说和绝对定位比较，相对定位更不容易扰乱页面布局呢？ 以及在实际制作网页中，为什么我们需要这样的定位设置。。。有没有实例
2018-07-27 回复 有任何疑惑可以回复我~
#11

Qnull 回复 Gaberial 提问者

Emmm 我也才学前端没几天、只是有其他几门编程语言的基础、所以学的快一点、有些东西还没深入研究……html和css我是在W3CSCHOLL这个网站上把所有内容大致了解了一遍、因为这些是死东西、复杂点的可以在实际准备做一个中小型的项目时再去查具体的实现代码、实践中不断提高能力。
2018-07-27 回复 有任何疑惑可以回复我~
#12

Qnull 回复 Gaberial 提问者

问题一、偏移和定位方式设不设置没太大关系。 关于偏移、你代码里更改了top/left/right/bottom 等距离值、它都会产生偏移、且无论你是绝对定位还是相对定位
2018-07-27 回复 有任何疑惑可以回复我~
#13

Qnull 回复 Gaberial 提问者

https://www.cnblogs.com/shenfangfang/p/5278528.html 百度上这篇文章你可以看看、虽然很啰嗦、但是讲的还行。如果看完实在还是不懂我再实际做几个demo给你演示下。
2018-07-27 回复 有任何疑惑可以回复我~
#14

Gaberial 提问者 回复 Qnull

行，我好好研读一下，多谢您
2018-07-28 回复 有任何疑惑可以回复我~
#15

Qnull 回复 Gaberial 提问者

”您”字太客气了、我才大三、还小
2018-07-28 回复 有任何疑惑可以回复我~
#16

Gaberial 提问者 回复 Qnull

今天查了另外的资料，感觉可以理解了。但是不清楚实际开发网站过程中什么时候会应用到？
2018-07-28 回复 有任何疑惑可以回复我~
#17

Gaberial 提问者

非常感谢！
2018-08-01 回复 有任何疑惑可以回复我~
查看14条回复
从人进化成猿
2018-08-01

这句话可以这样理解：

1、你先不要让div进行偏移。观察div（也就是红框）的位置和span（也就是文字）的位置。你会发现：文字是在div后另起一行的位置（1号图的位置）

https://img1.sycdn.imooc.com//5b61214a0001d2d114770901.jpg

2、然后让div偏移在观察。（2号图），你会发现span的位置，没变，div按要求偏移了。

https://img1.sycdn.imooc.com//5b61215d0001ca1214600879.jpg

3、所以这样理解为：偏移前的位置保留不动。（可以认为在原位置还有个隐形的div占坑）我是这样理解的。


3 回复 有任何疑惑可以回复我~
收起回答
慕移动3385141
2018-07-26

原先div偏移前的位置依旧被占用，只是那个位置没有显示

4 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226075    人
  • 解答问题       18236    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

2 回答还是没怎么理解：偏移前的位置保留不动

5 回答偏移前的位置保留不动怎么理解

13 回答”偏移前的位置保留不动”怎么理解？

3 回答偏移前的位置保留不动

2 回答偏移前的位置保留不动
搜索更多本课相关问答

对“偏移前的位置保留不动”这句话还是不太理解，求问

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信