。

有时候可能会把错误的元素放在其他元素前面#xff0c;要解决这个问题却没有那么简单。

一般的布局方法是用各种操作来控制文档流的行为。

定位则不同#xff1a;它将元素彻底…许多开发人员对定位的理解很粗略如果不完全了解定位就很容易给自己挖坑。

有时候可能会把错误的元素放在其他元素前面要解决这个问题却没有那么简单。

一般的布局方法是用各种操作来控制文档流的行为。

定位则不同它将元素彻底从文档流中移走。

它允许你将元素放在屏幕的任意位置。

还可以将一个元素放在另一个元素的前面或后面彼此重叠。

默认定位

定位的元素从文档流中移走了意味着允许将元素放在屏幕任意位置还可以放在另一个元素的前面或后面彼此重叠。

一、固定定位

fixed就能将元素放在视口的任意位置。

这需要搭配四种属性一起使用top、right、bottom和left。

这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。

比如top:

可以将元素放在视口任意位置postion:fixed;//通过四个值控制元素与浏览器视口边缘的位置//同时四个值隐式制定元素的大小top:0;left:0;right:0;bottom:0;

/style(一用固定定位创建模态框

我们要用这些属性创建一个如图所示的模态框。

该模态框会在网页内容前弹出来它会挡住网页内容直到关闭该弹窗。

通常情况下模态框用于要求用户阅读一些内容或者在下一步操作之前输入一些内容。

比如如图的模态框展示了一个表单用户可以注册一个时事通讯。

初始状态下用display:none隐藏弹窗然后用JavaScript将display改成block以显示弹窗。

bodyheader

idopen注册/button/p/div/headerdiv

idmodal

idcloseclose/buttonh2标题栏/h2p请注册电子邮件/pformplabel

typetext

typesubmit提交/button/p/form/div/div

/body

document.getElementById(open)var

close

document.getElementById(close)var

modal

document.getElementById(modal)button.addEventListener(click,

function

{e.preventDefault()modal.style.display

block})close.addEventListener(click,

function

{e.preventDefault()modal.style.display

none})

/script代码里的第一个元素是顶部条。

它包含了触发模态框的按钮。

第二个元素是模态框。

它包括一个空的modal-backdrop用来遮住页面剩余部分将用户的注意力集中到弹窗的内容。

弹窗内容在modal-body里。

body

{/*默认隐藏模态框。

当要打开模态框的时候JavaScript会设置display:

block*/display:

{/*当打开模态框时用半透明的蒙层遮挡网页剩余内容*/position:

fixed;top:

white;/*允许模态框主体在需要时滚动*/overflow:

auto;

}在这段CSS里我们使用了两次固定定位。

第一次是modal-backdrop的蒙层四个方向都设置为0。

0.5)。

这个颜色符号指定了红、绿、蓝的值均为0算出来是黑色。

第四个值是“alpha”通道它指定透明度0是完全透明1是完全不透明。

0.5是半透明因此该元素下面所有的网页内容就会变暗。

第二次固定定位了modal-body。

它的四条边都在视口内顶边和底边到视口对应的边缘为3em左边和右边距离视口对应的边缘为20%。

因为它的背景色为白色所以模态框呈现为一个在屏幕居中的白色盒子。

虽然可以随意滚动网页但是背景和模态框主体都不会动。

打开页面我们看到屏幕上方有一个带按钮的淡黄色顶部条。

点击按钮打开定位的模态框。

因为是固定定位所以即使滚动页面模态框的位置也不会变为了演示我们特地将body上的min-height值设得很大撑出了滚动条​。

点击模态框顶部的Close按钮关闭弹窗。

这个按钮现在的位置不太对我们稍后会调整它的位置。

定位一个元素时不要求指定四个方向的值可以只指定需要的方向值然后用width和/或height来决定它的大小也可以让元素本身来决定大小。

请看如下声明。

position:fixed;

width:20%;这段代码会将元素放在距离视口顶部和右边1em的位置宽度为视口宽度的20%。

它省略bottom和height属性元素的高度由自身的内容决定。

例如这可以用于将一个导航菜单固定到屏幕上。

即使用户滚动网页内容该元素的位置也不会改变。

因为固定元素从文档流中移除了所以它不再影响页面其他元素的位置。

别的元素会跟随正常文档流就像固定元素不存在一样。

也就是说它们通常会在固定元素下面排列视觉上被遮挡。

这对于模态框来说没问题因为我们希望模态框出现在最前面的中间位置直到用户关闭它。

而对于其他固定元素比如侧边导航栏就需要注意不要让其他内容出现在它下面。

通常给其他内容加一个外边距就能解决该问题。

比如将所有内容放在容器里容器设置right-margin:20%。

外边距会流到固定元素下面内容就不会跟导航栏重叠。

二、绝对定位

固定定位让元素相对视口定位此时视口被称作元素的包含块containing

绝对定位的行为也是如此只是它的包含块不一样。

绝对定位不是相对视口而是相对最近的祖先定位元素。

跟固定元素一样属性top、right、bottom和left决定了元素的边缘在包含块里的位置。

style

可以将元素放在祖先定位元素的任意位置postion:absolute;//同样通过四个值控制元素与浏览器视口边缘的位置top:0;left:0;right:0;bottom:0;

}一让Close按钮绝对定位

为了演示绝对定位我们重新设置Close按钮的位置将其放在模态框的右上角如图所示。

我们需要将Close按钮设置为绝对定位。

因为它的父元素modal-body是固定定位的所以会成为Close按钮的包含块。

.modal-close

{position:absolute;top:0.3em;right:0.3em;padding:0.3em;cursor:pointer

}这段代码将按钮放在距离modal-body顶部0.3em、右侧0.3em的位置。

通常情况下就像本例一样包含块是元素的父元素。

如果父元素未被定位那么浏览器会沿着DOM树往上找它的祖父、曾祖父直到找到一个定位元素用它作为包含块。

如果祖先元素都没有定位那么绝对定位的元素会基于初始包含块initialcontaining

二定位伪元素

Close按钮已经定位好了只是过于简陋。

对于这种Close按钮用户通常期望看到一个类似于x的图形化显示如图所示。

你可能首先想到将按钮里的文字close换成x但是这会导致可访问性的问题辅助的屏幕阅读器会读按钮里的文字。

因此要给这个按钮一些有意义的提示。

在使用CSS之前HTML本身必须有意义。

相反你可以用CSS隐藏close并显示x。

总共需要两步。

首先将按钮的文字挤到外面并隐藏溢出内容。

然后将按钮的:after伪元素的content属性设置为x并让伪元素绝对定位到按钮中间。

.modal-close

1em;/*让元素里的文字溢出并隐藏*/text-indent:

10em;overflow:

}以上代码清单明确指定按钮为1em大小的方形。

text-indent属性将文字推到右边溢出元素它的确切值不重要只要大于按钮宽度即可。

由于text-indent是继承属性需要在伪类元素选择器上设为0因此x便不会缩进。

伪类元素现在是绝对定位。

因为它表现得像按钮的子元素一样所以定位的按钮就成为其伪元素的包含块。

设置一个较小的line-height让伪元素不要太高用top和left属性让它在按钮中间定位。

绝对定位是定位类型里的重量级选手。

它经常跟JavaScript配合用于弹出菜单、工具提示以及消息盒子。

我们将用绝对定位来构建一个下拉菜单但在此之前我们需要先看看它的搭档相对定位。

三、相对定位

相对定位可能是最不被理解的定位类型。

当第一次给元素加上position:

relative的时候你通常看不到页面上有任何视觉改变。

相对定位的元素以及它周围的所有元素都还保持着原来的位置。

如果加上top、right、bottom和left属性元素就会从原来的位置移走但是不会改变它周围任何元素的位置

style

{postion:relative;top:1em;left:2em;

}如图所示四个inline-block元素给第三个元素加上三个额外的属性position:

relative、top:

2em将其从初始位置移走但是其他元素没有受到影响。

它们还是围绕着被移走元素的初始位置跟随着正常的文档流。

设置top:

2em将元素从它来的左侧边缘向右移动了2em。

这可能导致元素跟它下面或者旁边的元素重叠。

在定位中也可以使用负值比如bottom:

跟固定或者绝对定位不一样不能用top、right、bottom和left改变相对定位元素的大小。

这些值只能让元素在上、下、左、右方向移动。

可以用top或者bottom但它们不能一起用bottom会被忽略​。

同理可以用left或right但它们也不能一起用right会被忽略​。

有时可以用这些属性调整相对元素的位置把它挤到某个位置但这只是相对定位的一个冷门用法。

更常见的用法是使用position:

实际应用

由于绝对定位的最近父元素必须是定位元素所以将父元素设置为相对定位。

既不影响父元素又可以实现绝对定位。

一创建一个下拉菜单

接下来我们用相对和绝对定位创建一个下拉菜单。

它的初始状态是一个简单的矩形当用户鼠标悬停到上面时会弹出一个链接列表。

div

classsubmenuli首页/lili新闻中心/lili服务支持/lili关于我们/li/ul/div/div/navh1这是一个h1标题/h1/div将它添加到HTML中放在div

classmodal的结束标签后面。

这段代码包含了一个容器元素之后我们会将它的内容居中并让它跟顶部条的内容对齐。

我还在弹出列表下面放了一个h1标签以展示弹出列表如何出现在其他网页内容前面。

下拉菜单容器包含两个子元素一个始终显示的灰色矩形标签以及一个下拉菜单。

下拉菜单用显示和隐藏表示菜单展开和收起。

因为它会是绝对定位的所以当下拉菜单显示时不会改变网页的布局这意味着它显示时会出现在其他内容前面。

.container

}当移动鼠标指针到主菜单标签时下拉菜单就会从下面弹出。

请注意这里是在整个容器上设置hover状态来打开菜单。

也就是说只要鼠标停在它的任何内容上无论是dropdown-label还是dropdown-menu菜单都会保持打开状态。

2.1em将其顶部边缘放在标签下面算上内边距和边框标签高2.1em​。

min-width为100%保证它至少等于容器的宽度容器宽度由dropdown-label决定​。

之后用submenu类给下来菜单内的菜单加上样式。

​

(二创建CSS三角形

下拉菜单距离完美还差一步。

现在它已能正常工作但用户无法一眼察觉到主菜单标签下面还有更多内容。

我们来给标签加上一个小的向下箭头告诉用户还有更多内容。

我们可以用边框画一个三角形当作向下箭头。

这里用标签的:after伪元素来画三角形然后使用绝对定位将它放到标签的右边。

大多数情况下我们会给一个元素加上较细的边框通常1px或者2px就够了但如果把边框变得像图那样粗呢图中给每条边都加了独特的颜色用来标出每条边的起始位置。

注意观察角上两条边的边缘接触的地方它们形成了一个对角边。

再观察一下将元素的宽和高缩小到0时会发生什么​。

所有的边都汇聚到一起最后在中间连接起来了。

元素四周的边都变成了三角形。

顶部的边箭头指向下边右边的边指向左边以此类推。

基于这个现象可以用一条边作为三角形然后将剩下的边设置为透明。

元素的左右边都透明而顶部边可见就会如图所示形成一个简单的三角形。

我们给dropdown-label::after伪元素加上样式做一个三角形并让它绝对定位。

.dropdown-label

black;}伪元素因为没有内容所以没有宽或高。

然后用border-color简写属性设置上边框为黑色左右和下面的边框为透明构造一个向下的箭头。

dropdown-label右边用内边距留出了空间用来放三角形。

最后的效果如图所示。

打开菜单箭头方向反转朝向上面表示菜单可以被关闭。

微调top值从1em到0.7em​让向上的箭头看起来跟向下的箭头处于相同的位置。

另外你也可以用一个图片或者背景图来实现箭头但是用短短几行CSS代码就可以为用户免去不必要的网络请求。

加上这个小小的箭头能给网站或应用程序增色不少。

这项技术还可以用来构建其他复杂形状比如梯形、六边形和星形。

查看用CSS构建的各种形状可以访问css-tricks网站上的文章The

Shapes

定位非常有用但也需要弄清楚它会带来什么后果。

当把一个元素从文档流中移除时我们就需要管理之前由文档流处理的所有事情了。

首先要确保元素不会不小心跑到浏览器视口之外导致用户会看不到元素。

最后还有层叠的问题。

在同一页面定位多个元素时可能会遇到两个不同定位的元素重叠的现象。

有时我们会发现“错误”的元素出现在其他元素之前。

一层叠顺序

浏览器将HTML解析为DOM的同时还创建了另一个树形结构叫作渲染树render

tree​。

它代表了每个元素的视觉样式和位置。

同时还决定浏览器绘制元素的顺序。

顺序很重要因为如果元素刚好重叠后绘制的元素就会出现在先绘制的元素前面。

通常情况下使用定位之前​元素在HTML里出现的顺序决定了绘制的顺序。

考虑以下代码里的三个元素

divone/div

divthree/div它们的层叠行为如图所示。

这里使用了负的外边距让元素重叠但并未使用任何定位。

后出现在标记里的元素会绘制在先出现的元素前面。

定位元素时这种行为会改变。

浏览器会先绘制所有非定位的元素然后绘制定位元素。

默认情况下所有的定位元素会出现在非定位元素前面。

如图所示给前两个元素加了position:

relative它们就绘制到了前面覆盖了静态定位的第三个元素尽管元素在HTML里的顺序并未改变。

注意在定位元素里第二个定位元素还是出现在第一个定位元素前面。

定位元素会被放到前面但是基于源码的层叠关系并没有改变。

也就是说在上述网页里模态框和下拉菜单都会出现在静态内容之前符合预期​但是源码里后出现的元素会绘制在先出现的元素之前。

classmodal及其内容移到下拉菜单后面。

通常情况下模态框要放在网页内容的最后/body关闭标签之前。

大多数构建模态框的JavaScript库会自动这样做。

因为模态框使用固定定位所以不必关心它的标记出现在哪里它会一直定位到屏幕中间。

改变固定定位元素的标记位置不会产生不好的影响但是对相对定位或绝对定位的元素来说通常无法用改变标记位置的方法解决层叠问题。

相对定位依赖于文档流绝对定位元素依赖于它的定位祖先节点。

这时候需要用z-index属性来控制它们的层叠行为。

二使用Z-INDEX控制层叠顺序

z-index属性的值可以是任意整数正负都行​。

z表示的是笛卡儿x-y-z坐标系里的深度方向。

拥有较高z-index的元素出现在拥有较低z-index的元素前面。

拥有负数z-index的元素出现在静态元素后面。

使用z-index是解决网页层叠问题的第二个方法。

该方法不要求修改HTML的结构。

将modal-backdrop的z-index设置为1将modal-body的z-index设置为2确保模态框的主体在蒙层前面​。

.modal-backdrop

{/*当打开模态框时用半透明的蒙层遮挡网页剩余内容*/position:

fixed;top:

white;/*允许模态框主体在需要时滚动*/overflow:

auto;z-index:

一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。

其中一个元素会作为层叠上下文的根比如给一个定位元素加上z-index的时候它就变成了一个新的层叠上下文的根。

所有后代元素就是这个层叠上下文的一部分。

实际上将层叠上下文里的所有元素一起绘制会造成严重的后果层叠上下文之外的元素无法叠放在层叠上下文内的两个元素之间。

换句话说如果一个元素叠放在一个层叠上下文前面那么层叠上下文里没有元素可以被拉到该元素前面。

同理如果一个元素被放在层叠上下文后面层叠上下文里没有元素能出现在该元素后面。

div

threethree/div这段代码包含了三个盒子其中两个被定位并且z-index为1第一个盒子里面有一个绝对定位的元素它的z-index为100。

body

}虽然第一个盒子里绝对定位的子元素nested的z-index很高但还是出现在第二个盒子后面因为它的父元素即第一个盒子形成的层叠上下文在第二个盒子后面

叠放在第二个盒子后面的第一个盒子是一个层叠上下文的根。

因此虽然nested所在div的z-index值很高但是它内部的绝对定位元素不会跑到第二个盒子前面。

在浏览器开发者工具里试验一下感受这种关系改变每个元素的z-index看看会发生什么。

给一个定位元素加上z-index是创建层叠上下文最主要的方式但还有别的属性也能创建比如小于1的opacity属性还有transform、filter属性。

由于这些属性主要会影响元素及其子元素渲染的方式因此一起绘制父子元素。

文档根节点html也会给整个页面创建一个顶级的层叠上下文。

非定位元素

如果不根据组件的优先级定义清晰的层叠顺序那么一个样式表很容易演变成一场z-index大战。

如果没有清晰的说明开发人员在给一个模态框之类的元素添加样式时为了不被其他元素遮挡就会设置一个高得离谱的z-index比如999999。

这样的事情重复几次后大家就只能凭感觉给一个新的组件设置z-index。

如果你使用预处理器比如LESS或SASS​或者你支持的所有浏览器都支持自定义属性​就能很方便地处理这个问题。

将所有的z-index都定义为变量放到同一个地方如下代码片段所示。

这样就能清晰地看到哪些元素在前哪些元素在后。

--2-nav-menu:200;

--z-modal-body:410;将增量设为10或者100这样就能在需要的时候往中间插入新值。

如果发现z-index没有按照预期表现就在DOM树里往上找到元素的祖先节点直到发现层叠上下文的根。

然后给它设置z-idnex将整个层叠上下文向前或者向后放。

还要注意多个层叠上下文嵌套的情况。

网页很复杂时很难判断是哪个层叠上下文导致的问题。

因此在创建层叠上下文的时候就一定要多加小心没有特殊理由的话不要随意创建尤其是当一个元素包含了网页很大一部分内容的时候。

尽可能将独立的定位元素比如模态框放到DOM的顶层结束标签/body之前这样就没有外部的层叠上下文能束缚它们了。

有些开发人员会忍不住给页面的大量元素使用定位。

一定要克制这种冲动。

定位用得越多网页就越复杂也就越难调试。

如果你定位了大量元素就回头评估一下现在的情况尤其是当你发现很难调试出自己想要的布局时一定要反思。

如果可以用别的方法实现某个布局应该优先用那些方法。

如果能够依靠文档流而不是靠明确指定定位的方式实现布局那么浏览器会帮我们处理好很多边缘情况。

记住定位会将元素拉出文档流。

五、粘性定位

人们已经用四种主要的定位类型静态、固定、绝对以及相对很长时间了不过现在浏览器还提供了一种新的定位类型粘性定位sticky

它是相对定位和固定定位的结合体正常情况下元素会随着页面滚动当到达屏幕的特定位置时如果用户继续滚动它就会“锁定”在这个位置。

最常见的用例是侧边栏导航。

网页刚加载的时候侧边栏的位置一切正常。

网页滚动它也跟着滚动直到滚到快要离开视口的时候它会锁定在那个位置。

当网页的剩余部分继续滚动时它却好像固定定位的元素一样停留在屏幕上。

接下来修改网页结构定义两栏。

在HTML里将容器改成如代码所示的代码。

把之前的内容下拉菜单和网页标题放在左边栏再添加一个右边栏放“affix”菜单。

div

classsubmenuli首页/lili新闻中心/lili服务支持/lili关于我们/li/ul/div/div/navh1这是一个h1标题/h1/mainaside

classcol-sidebardiv

classsubmenuli首页/lili新闻中心/lili服务支持/lili关于我们/li/ul/div/aside

/div接下来更新CSS将容器设为弹性容器设置两栏的宽度。

本例复用了下拉菜单的子菜单的样式当然你也可以给侧边栏添加其他的元素和样式。

.container

}以上代码主要用来设置两栏布局。

最后只用了两句声明来给affix元素定位。

top值设置了元素最终固定的位置距离视口的顶部1em。

因为粘性元素永远不会超出父元素的范围所以本例中affix不会超出col-sidebar的范围。

当滚动页面的时候col-sidebar会一直正常滚动但是affix会在滚动到特定位置时停下来。

如果继续滚动得足够远粘性元素还会恢复滚动。

这种情况只在父元素的底边到达粘性元素的底边时发生。

注意只有当父元素的高度大于粘性元素时才会让粘性元素固定因此这里特意给弹性容器加上min-height以便让父元素足够高。

.sticky