HTML网页制作：[21]定位属性

2025-09-30 09:22:18

1、通过上一篇经验，我们知道了普通流层，浮动流层，这一篇将学习到定位流层。定位流层是比浮动流层还要高一些的流层。可以说，是网页的最高层了吧。

HTML网页制作：[21]定位属性

2、定位属性用来控制元素的位置，包括相对定位、绝对定位、固定定位三种方式。

相对定位：让元素相对于文档布局的原始位置进行偏移；

绝对定位：允许元素与原始文档布局分离且任意定位；

固定定位：当页面滚动时，元素不随着滚动。

HTML网页制作：[21]定位属性

1、position：static

position，定位的属性，而static代表默认定位。

默认定位，是没有定位，元素出现在正常的了流中

1、生成相对定位的元素，相对于其正常位置进行定位。

position:relative

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

例如：

<style>

.perent{ background:#CCC; width:400px; height:400px;}

.div1,.div2,.div3{ float:left; width:100px; height:100px;}

.div1{ background:#000;}

.div2{ background:#0F0;}

.div3{ background:#F00;}

</style>

</div>

</div>

如图所示

HTML网页制作：[21]定位属性

2、现在，我们对中间的绿框框进行相对他本身进行定位。

</div>

</div>

可以看到，如图所示，绿框框相对于他原本的位置，左侧为150px，上侧为150px

HTML网页制作：[21]定位属性

1、绝对定位和相对定位都属于定位层。但是相对定位，会在其原本的位置留下痕迹。

比如：你出差了，但是你的公司还是有你的位置。

而相对定位是你跳巢了，然后你原本的公司会消除掉你所有的信息，不会再给你保留你的位置，而你的位置将被其他原本公司的人所占领。

position:absolute

例如：

</div>

效果图如图所示

HTML网页制作：[21]定位属性

1、当页面滚动的时候，元素不会随着滚动

position:fixed

例如：

position:fixed; right:100px; bottom:100px;

这样，你的框框会距离浏览器下方 100px，浏览器右侧100px

1、许多人在做网页的时候，都会经常碰到遮掩的问题，就是我明明想让这个框框位于这个位置，结果却总是不让我满意。这就是定位没有掌握好。这里再总结下：

1）普通流层。比喻成一张纸。你要在纸上写东西，这些东西必须要按照纸的格式，比如是汉字的方格纸还是信纸这样的格式去写。并且字与字不能重叠，否则会发生混乱。试问你将100个字写在一个格子里，那就是一个黑疙瘩。

2）浮动流层。你可以理解为在纸上放置的一些东西，比如橡皮、铅笔等，你可以放置在纸上的任意位置，并且覆盖纸上的东西。但是当你把橡皮移开后，你可以发现纸上原本的东西是不会变动的。

3）定位流层。更高的流层。起到定位的作用，可以仿照我之前的比喻来理解，比如跳巢等。

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。