网页的 position 定位

发布时间：2023-12-31 06:51:10 所属栏目：教程来源：DaWei

导读： 众所周知，现在的网页中每个元素都是相对固定的，意思是每个网页元素都有其相对其他元素较为固定的位置。从主观的角度来思考，网页中的定位应该至少分为两种：

一种是以固定不动的东西作

众所周知，现在的网页中每个元素都是相对固定的，意思是每个网页元素都有其相对其他元素较为固定的位置。从主观的角度来思考，网页中的定位应该至少分为两种：

一种是以固定不动的东西作为基准去定位自己的位置；
一种应该是以某个已有元素的位置去定位自己的位置。
那么，掌握了这两种定位思路，大家就不难掌握今天的知识点了。首先，网页定位。一个合理的定位几乎决定了我们网页的用户查看网页的整个观感效果。因此，学好定位在网页设计中是很重要的。

网页中的 position

position，英文较好的同学们或许早已明白，它的中文译为位置。在网页设计中，它是很多元素都有的一个属性，那么这个属性有哪些可能的值？这一点我们要有个基本的认知：

static
首先，我们来了解它的默认值 static。static 是静态的，静止的意思。所有支持 position 属性的 HTML 元素在一上来的属性值都是这个值 static。它是一个默认值，在网页设计中可不是说这个元素的位置是静止的，而是说明这个元素是没有定位的。元素会按照它不设置任何定位的时候的模样展示。具体的模样在这里不做详细说明，后面我们会有更深入的课程讲解。

absolute
其次，我们来看几个position属性常见的取值。第一个是 absolute ，它的意思是绝对定位，当一个元素的 position 属性的值为 absolute 的时候，意味着它是一个采用绝对定位的元素。也就是我们本节1.1 中描述的第二种定位方式。大多数情况下，这种设置下元素的位置是通过上，下，左，右属性进行的定位的。

fixed
第二个常见的值就是 fixed ，当元素的 position 属性被赋予 fixed 的值后，元素和 absolute 一样，也是一个绝对定位的元素。定位方式也完全一致，即通过上下左右来实现自己的定位。

但同学们肯定会有疑问：那么 absolute 和 fixed 两种设置有什么区别呢。这里就要重点提一下：二者的区别是在定位的时候参照的东西不同。 absolute 定位的方式是相对于 static 定位以外的第一个父元素进行定位的。而 fixed 指的是相对于浏览器窗口进行的定位。但同学们仍旧不要忘了它们都是绝对定位的方式。

relative
第三个常见的值就是 relative ，这个是我们第一个见到的相对定位取值吧，也就是 1.1 中描述的第一种定位方式。这种定位的方式呢，往往是相对于正常位置去定位，也会用到上下左右来辅助定位。

好了，以上的介绍呢就是我们在这个小节中关于 position 定位的介绍。由于多数是给大家总结干货，就少了些详细的内容，大家如果想今后学习更详细的内容，请大家去相关标准的官网去下载相应的文档，那里面会有最全面，最标准的介绍。同时在这里，老师也要提醒大家，官方文档固然官方，但毕竟学习的出，远大于学习的入，大家做出来的样式才算大家所学，文档上的知识没有必要逼迫自己填鸭式全部记住，也不可能记住。把文档当工具，才是学习这一门学问的正常现象。

定位方式的分类
刚刚说到了定位方式，其实常见的定位体系大致上只有三种：

第一种是常规的根据文档流进行元素的排布定位，我们称之为流式定位；

第二种是绝对定位，就是我们上面提到的某些定位方式；

第三种定位方式，就是我们这回要讲解的浮动定位。

在 HTML中，浮动定位是使用一个名为 float 的属性来约束元素的位置，下面我们就来仔细讨论学习一下这个 float。

float 的取值
floa t的取值有三种：左浮动，右浮动，和不浮动。原则上讲，任何元素都可以浮动，比如 DIV，比如ul 等。这里需要强调一点：凡是被声明为 float 的元素都会自动地被设置为块元素。

清除浮动
有的时候网页发生一些布局错误的时候，浮动的效果并非我们想要，这个时候就需要清除浮动。那么常见的清除浮动方式有哪些呢？

首先是：不清除浮动 clear：none 。再有就是清除左/右浮动其中之一 cleat ： left/right 。最后就是清除所有的浮动 clear：both 这样大家就基本掌握了所有清除浮动的方式。

（编辑：源码门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!