希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统归纳过的。
【技术等级】初级
【承接文章】《CSS改变元素的定位模式，重要的样式属性，定位属性详解》
本文承接上一篇文章，继续为大家讲解上一篇中剩余的三个CSS定位属性。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
本文介绍上一篇文章中剩余的三个CSS定位属性，分别是：
z-index
visibility
overflow
一、设置定位元素在页面中的前后顺序：
CSS技术利用 z-index 属性来对HTML定位元素调整在页面中的前后顺序
该属性的取值：没有单位的整型数字。
该属性也被称为定位元素的“z轴”。是指重叠定位元素的前后关系。该属性取值数字越大越靠前；取值数字越小越靠后。
实例：设页面中有两个绝对定位的块级元素，尺寸均为200px*200px。id属性取值为first的块级元素，背景颜色为红色，距离页面左上角的位置为：左侧距离100px，顶部距离100px。id属性取值为second的块级元素，背景颜色为蓝色，距离页面左上角的位置为：左侧距离150px，顶部距离150px。设置这两个块级元素的z轴数据。
HTML代码如下所示：
<div id=”first”></div>
<div id=”second”></div>
CSS代码如下所示：
#first{
width:200px; height:200px;
background-color:#ff0000;
position:absolute;
left:100px; top:100px;
z-index:1000;
}
#second{
width:200px; height:200px;
background-color:#0000ff;
position:absolute;
left:150px; top:150px;
z-index:1200;
}
上述代码中，#first的z轴为1000，#second的z轴为1200，因此，蓝色的块级元素将覆盖红色的块级元素的一部分。
二、设置定位元素的可见性：
CSS技术利用 visibility 属性来设置HTML定位元素的可见性。
该属性的取值如下：
visible，定位元素可见。
hidden，定位元素不可见。
新的问题：在CSS中设置定位元素不可见，有以下两种方法。
方法一：#element{display:none;}
方法二：#element{visibility:hidden;}
上述这两种方法都可以隐藏定位元素，那么它们的区别是什么呢？
它们的区别在于：在元素流式定位的情况下，当display属性取值为none时，可以将对象本身和对象位置均隐藏；当visibility属性取值为hidden时，只能隐藏对象本身，而不能隐藏对象位置，即隐藏的对象依然保留其可见时的位置。
实例：设页面中有两个流式定位的块级元素，尺寸均为200px*200px。id属性取值为first的块级元素，背景颜色为红色。id属性取值为second的块级元素，背景颜色为蓝色。由于采用流式定位，所以两个块级元素在页面中的布局应该是红色的在上，蓝色的在红色的下方。
HTML代码如下所示：
<div id=”first”></div>
<div id=”second”></div>
CSS代码如下所示：
#first{
width:200px; height:200px;
background-color:#ff0000;
}
#second{
width:200px; height:200px;
background-color:#0000ff;
}
问题一：利用display属性隐藏#first块级元素。
这需要在#first的CSS代码中加入此句：display:none;
同学们尝试一下，此时页面中只会出现蓝色的#second块级元素，且出现在页面的左上角，顶替了#first块级元素的位置。
问题二：利用visibility属性隐藏#first块级元素。
这需要在#first的CSS代码中加入此句：visibility:hidden;
同学们尝试一下，此时页面中红色的#first块级元素消失，但是位置依然存在，即蓝色的#second块级元素仍旧出现在它原有的位置，并没有顶替#first块级元素的位置。
三、设置定位元素的溢出特性：
CSS技术利用 overflow 属性来设置HTML定位元素的溢出特性
首先，让我们了解一下什么叫做“溢出”：
当定位元素内部内容的量大于定位元素作为容器本身的宽高时，即容器无法再将内容全部存放在容器内部，我们说此时发生了“溢出”。
该属性的取值如下：
visible，默认值，可见。该取值指溢出部分照常显示。
hidden，隐藏。该取值指溢出部分隐藏。
scroll，滚动。该属性指无论是否溢出均产生滚动条。
auto，自动。该属性指当溢出时产生滚动条；若未发生溢出，则不产生滚动条。
实例：页面中有一个<div></div>块级元素，其id属性取值为“box”，宽度和高度均为150px。在该块级元素的内部复制了大量的文本，使得这个容器的尺寸无法完全盛放这些文本。这就发生了“溢出”现象。
HTML代码如下所示：
<div id=”box”>大量的文本……</div>
CSS代码如下所示：
#box{
width:150px; height:150px;
background-color:#ff5857;
text-align:justify;
font-size:14px;
text-indent:28px;
}
大家看此段CSS代码。如果在#box块级元素的CSS代码中分别添加下列代码：
overflow:hidden; 无法显示在#box块级元素内部的文本将隐藏。
overflow:scroll; 无法显示在#box块级元素内部的文本将隐藏，同时块级元素的右侧和底部出现垂直滚动条和水平滚动条。
overflow:auto; 无法显示在#box块级元素内部的文本将隐藏，右侧将出现垂直滚动条。
overflow:visible; 无法显示在#box块级元素内部的文本仍旧显示出来，就像没有使用overflow属性一样。
文章预告
下一篇文章中，小海老师总结出了几个跟定位有关的实例，带着大家一同看一看定位属性都有哪些应用领域，对定位技术有疑问的学习者千万不要错过！
小海教材
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
小海声明
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。