你对CSS布局中的Position了解程度有多少

2024-07-11 08:31:22

字体：大中小

来源：转载

供稿：网友

当人们将接触CSS布局的时候倾向于使用Position。Positoin似乎是一个很容易掌握的概念。从表面上来看，你只要精确指定了一个块所处的位置，它就会坐落在那里。然而定位比你刚接触时要更复杂一些。这里有几件事会绊倒一个新手，所以在熟练使用之前需要掌握它们。

一旦你深入地理解了Position的工作原理，你就可以使用它做出很棒的事来

盒模型和Position类型

为了理解定位你首先的理解盒模型。前面一个链接是我之前写给InstantShift关于盒模型的一篇文章。我在那里做了详细的介绍，在这里我将提供一个快速的总结。

在CSS中，每个元素都被一本矩形框所包围，每个元素都定了内容区，内容区被内边距（填充）包围，边框包围了内容区和内边距。外边距在边框外面用来和其他盒子分隔开来。你可以在下面这张图中看到这些

定位模式定义了一个盒子在整体布局中将会放置在哪里、每个盒子怎样影响在它周围的盒子。定位模式包含了正常文档流，浮动流和几种类型的定位元素

CSS定位属性有五个可取值

position: absolute
position: relative
position: fixed
position: static
position: inherit

下面我将对前三个属性进行详细地讲解，对后面两个属性只是作简单的介绍

static是position默认的值。每个position属性被设置为static的元素将在正常文档流中显示。它们被放置和显示的规格在盒模型中定义。

一个static定位的元素将会忽略任何top, right, bottom, left, z-index属性的值。为了使用其中任何一个值，你必须将元素的position属性设置为absolute, relative, fixed之一

inherit和其他所有css属性一样，当前元素取得和父级元素相同的属性值。

绝对定位(Absolute Positioning)

绝对定位的元素完全从正常文档流中除去。对于包围它的其他元素而言，它们认为绝对定位的元素不存在，就好像将元素的display属性设置为none。假如你想保留它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你在设置一个绝对定位元素的位置时，top, right, bottom, left四个属性，你通常只定义其中的两个，top或者left，以及left或者right。它们的默认值都是auto

理解绝对定位的关键是理解它们从哪里开始。假如top值为20px，问题是20px是从哪里开始的。

一个绝对定位元素的起点位置是相对于它第一个postion属性值不为static的父级元素而言的。假如在父级元素链中没有满足条件的，绝对定位元素就是相对于整个文档窗口来定位的。哈

上一篇：通过css属性margin:auto让Div中的Table居中

下一篇：你应该知道的30个css选择器