整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家应该都知道，网站的布局对一个网站来说至关重要， CSS 作为新手，要做好一个网站，CSS 这关肯定得先过，今天教大家 CSS 的定位（Position）~
position 属性指定了元素的定位类型。position 属性有如下五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right 影响。
示例代码
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed 定位
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动：
示例代码
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。
relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
移动相对定位的元素，但它原本所占的空间不会改变。
h2.pos_top
{
position:relative;
top:-50px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
有什么疑问可以私信小编:"前端"
【技术等级】初级
【承接文章】《CSS这样处理HTML列表，三个简单的CSS属性，美化你的页面》
本文小海老师为大家详细讲解有关CSS定位方面的知识。相信许多有经验的朋友一定会经常在布局时遇到与定位有关的问题，今天咱们就共同来看一看CSS定位都具有哪些属性以及它们的用法。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
定位属性是指对HTML中的元素进行位置确定的一系列方式。CSS总共提供了以下四种定位方式：
流式定位
绝对定位
相对定位
固定定位
与定位相关的CSS属性包括以下11个：
width
height
display
position
top
right
bottom
left
z-index
visibility
overflow
一、利用position属性设置定位方式：
CSS技术使用 position 属性设置HTML元素的定位方式
CSS技术使用position设置HTML元素的定位方式。
首先，我们先来了解一下这四种定位方式的特点：
流式定位：HTML元素默认采用该种定位方式。这是指所有的HTML元素从上到下、从左向右按照代码的书写顺序依次出现。
绝对定位：所有的HTML元素的位置都是相对于页面左上角来实现定位的。
相对定位：所有的HTML元素的位置都是相对于上一个元素来实现定位的。
固定定位：HTML元素相对于页面指定位置固定不变，不受垂直滚动条的影响。同时，HTML元素在固定定位的前提下，其元素位置是相对于页面左上角。
我们一般将上述四种定位方式归纳为两种：“流式定位”和“非流式定位”。
具体的HTML元素采用哪种定位方式，是通过position属性来实现的，该属性有以下四种取值。
static，默认值，HTML元素采用“流式定位”。
absolute，HTML元素采用“绝对定位”。
relative，HTML元素采用“相对定位”。
fixed，HTML元素采用“固定定位”。
二、HTML元素的位置属性：
CSS技术使用四个属性设置HTML非流式定位元素的位置
当HTML元素采用“非流式定位”时，可以使用以下四个位置属性来设置该元素具体的位置。
left，设置元素左侧的位置。
right，设置元素右侧的位置。
top，设置元素顶部的位置。
bottom，设置元素底部的位置。
这四个属性的取值都可以是带有单位的数值。
三、HTML块级元素的尺寸属性：
CSS技术使用两个属性设置块级元素的尺寸
当HTML元素为“块级元素”时，可以使用以下两个尺寸属性来设置该块级元素的宽度和高度。
width，设置块级元素的宽度。
height，设置块级元素的高度。
这两个属性包括以下几种取值：
auto，自动，块级元素的宽度和高度随元素内部的内容多少而自动变化。
带有单位的数值，指定块级元素的宽度和高度为明确的数值。
百分比，指定块级元素的宽度和高度为父元素的百分比。
四、设置HTML元素的显示特性：
CSS技术利用 display 属性来设置CSS元素的显示特性
CSS技术利用display属性来设置CSS元素的显示特性。
该属性有多种取值：
none，将HTML元素隐藏。
block，将HTML元素中的内联元素或其他元素转换为块级元素。
inline，将HTML元素中的块级元素或其他元素转换为内联元素。
inline-block，将HTML元素中的任意元素转换为内联块元素。
块级元素独占一行。
可以利用width和height属性为块级元素设置宽度和高度。
内联元素可以在一行内显示多个。
不能利用width和height属性设置内联元素的宽度和高度。
内联块元素结合了“块级元素”和“内联元素”各自的优点：
可以利用width和height属性为内联块元素设置宽度和高度。
内联块元素可以在一行内显示多个。
定位属性还包括三个属性，小海老师会在下一篇文章中为大家介绍剩下的属性以及定位功能的具体用法。
下一篇文章中，小海老师会继续为大家向下讲解CSS定位属性，下一次我们讲解CSS中剩余的三个定位属性以及定位技术的使用，希望大家千万不要错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
SS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。
CSS学习教程
Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fixed固定定位及sticky磁铁定位模型。其中较常使用的是相对定位、绝对定位与固定定位三种模式。
以上给出了position属性常用的定位方式，在实际进行页面设计及元素布局过程中可以使用以上属性实现元素的精确定位。
为演示定位属性使用，本文设计制作上海世界技能大赛选手证，要求学生使用HTML进行选手证的设计及编码实现。要求：
本例设计要求如上所示，设计实现参考效果如下所示：
参赛证设计样式
参赛证设计样式描述如上图所示，基本元素来自世界技能大赛上海网站，主要logo包含上海世赛标识LOGO、选手照片与选手信息。所需素材如下：
案例所需素材
本例实现代码如下所示：
CSS样式文件
页面body部分
本例实现代码如上所示，其中CSS样式部分用于实现div布局样式，页面body部分为页面呈现内容。本例父元素使用relative属性进行定位，所有子元素均以父元素为基础使用absolute进行精确定位。
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！如需完整案例代码请关注并私信作者。
*请认真填写需求信息，我们会在24小时内与您取得联系。
