关于CSS中定位的个人理解

以前看到过一句话，大意是CSS世界其实是“流”的世界。现在偶然想起，便觉得很有道理。

1.那么什么是“流”呢？

　　也许你见过大海或者大河，里面的水是流动的。或许，我们可以将其理解为“流”。在CSS中，我们同样的也可以将html文档比作大海，也就是将html文档看成流。

2.什么是固定定位（fixed）呢？

　　在前面提到，我们将整个html文档看成是大海，那么固定定位的元素可以类比于大海中的小岛，这些小岛的位置是不动的，不会随着水流的方向而发生移动。

3.什么是静态定位(static)呢？

　　　海上的漂流瓶总是沿着水流的移动而移动，这就可以看作是一个静态定位。

4.什么是相对定位（relative）呢？

　　　相对，所谓相对那么就需要一个参照物了？那么这个参照物是什么呢？毫无疑问，这个参照物就是自身。相对定位的元素我们可以将其看成是在海里面航行的船。如果不给船提供动力，那么它就将像漂流瓶一样沿着水流的方向而发生移动。在我们给它添加动力之后，（添加动力，我们可以将其理解为元素添加：position:relative 属性）它就可以沿着自己的航线发生移动，与本应该随着水流的移动相比，它的位置就发生了变化。

5.什么是绝对定位（absolute）呢？

　　我们都知道，绝对定位的元素是需要依托于一个已经定位的父级元素的。在第4点中我们，相对定位的元素我们可以将其看成是在海里面航行的船，那么绝对定位的元素我们就可以将其看成是船上的物品，比如说驾驶室。我们知道，驾驶室在船上的位置是始终不变的，就像在那里长了根一样。

转载于:https://www.cnblogs.com/iamsmiling/p/10609624.html

关于CSS中定位的个人理解相关推荐

CSS中定位属性的常见属性值
CSS中定位属性的常见属性值在使用CSS对页面布局时,我们常会使用到定位属性,定位主要应用于一个元素在另外一个元素之上,或者我们需要在网页中精准地确定某一个元素的位置,并且这个元素有明确的参照物.其 ...
CSS中定位position 和 transform 移动元素的比较
主要解决问题: 在使用 transform: translate(50%,50%); 平移元素后,再用 offsetLeft 和offsetTop 获取该元素距离 body 左侧距离时,无法获取经 t ...
CSS中的position:relative理解
今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明包含关系:父级absolute,子级relative: 包含关系 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
CSS中关于margin的理解误区
思考一在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...
CSS中盒模型的理解
1.基本的盒模型知识 CSS css盒子模型又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如 ...
关于css中overflow的一些理解
在做移动端开发的时候,遇到过这么个问题:要把图片进行放大,但有时候图片比较长,一个手机的版面看不了,于是需要用到overflow的属性,刚开始用了overflow-y:scroll, 于是问题来了,如 ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
关于CSS中关于定位的总结
CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位. static静态定位:应用的场景不多,这里不做介绍下面主要介绍一下其他三种常见的定位 1.position:relat ...

关于CSS中定位的个人理解

关于CSS中定位的个人理解相关推荐

最新文章

热门文章