在本文中，您将会了解到关于CSS中的position属性的新资讯，同时我们还将为您解释css中的position属性值的相关在本文中，我们将带你探索CSS中的position属性的奥秘，分析css中的
在本文中，您将会了解到关于CSS中的position属性的新资讯，同时我们还将为您解释css中的position属性值的相关在本文中，我们将带你探索CSS中的position属性的奥秘，分析css中的position属性值的特点，并给出一些关于CSS position属性、CSS position属性在代码中的应用、css 聊聊position属性、CSSposition属性的实用技巧。
本文目录一览：
CSS中的position属性（css中的position属性值）
1、position 属性
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法，共有4个属性值，分别是 static、fixed、relative、absolute、sticky。
1.1、static 属性值（默认定位，占据空间）
static定位是 HTML 元素的默认值，即没有定位，元素出现在正常的流中。你如果设置了 position 为 static 或者没有设置 position 属性，则该元素就是 static 定位，这种定位就不会受到top，bottom,、left、right的影响，仅仅只是正常出现在流中。
1.2、固定定位 fixed（不在文档流内）
使用 fixed 定位的元素的位置相对于浏览器窗口是固定的，即使窗口是滚动的它也不会滚动，定义了 fixed 定位的元素所设置的 top 或者left 等属性是相对于浏览器的窗口的。fixed 定位使元素的位置与文档流无关，因此不占据空间，它会和其他元素发生重叠。
下面绿色的元素使用的是 fixed 定位，top为0px、right为0px，固定在窗口的右上边，刚好贴着窗口。不在文档流内，不会占据空间，其他元素能挤在它的下面。
top为10px、right为10px，固定在窗口的右上边，距离窗口10像素的距离
1.3、绝对定位 absolute（不在文档流内）
绝对定位 absolute 的元素是相对于 static 定位以外的第一个父元素进行定位，如果元素没有已定位的父元素，那么它的位置相对于整个窗口。且 absolute 定位的元素与文档流无关，不占据空间，其他元素能挤在它的下面而发生重叠。
下面对最里面的元素使用了绝对定位，但是它的父元素使用的定位是 static，其他更上层的父元素都是默认定位，此时absolute定位的元素是相对于窗口进行定位的。
<div class="aaa"> <div class="bbb" style="position: static; background-color: #70e3b5; height: 50px"> <h2 class="ccc">这里是absolute定位元素</h2> </div> </div>
.ccc{ position: absolute; top: 0px; right: 0px; color: #2b4d4d; }
跑到了整个窗口的最右上边
给父元素 bbb 定义一个相对定位 relative，此时absolute 定义相对于定义了 relative 定位的父元素进行定位
如果是给父元素 ccc 定义relative定位，而 bbb 是默认定位的话，可以看到，此时 absolute 定义的元素是相对于 ccc 父元素进行定位的。所以 absolute 的元素是相对于 static 定位以外的第一个父元素进行定位
1.4、相对定位 relative（占据空间）
生成相对定位的元素，相对于其本身的正常位置进行定位。使用了相对定位的元素的原本所占的空间不会被挤压。当然，如果你设置的偏移太大，该元素有可能会跑到其他元素的上面而发生重叠
1.5、粘性定位 sticky（当在top值大于与窗口距离时切换为固定定位）
粘性定位，有一些非常奇怪的行为表现。
如果没有其他标签包裹该标签，即放在body标签内，假如设置了 top 属性，当 top 的值大于该标签到浏览器窗口的上边距离时才有效果，或者浏览器滚动使得该标签与浏览器窗口的距离小于 top 值时才有效果，此时相当于是固定定位 fixed。
如果有其他标签包裹该标签，比如你把一个粘性定位的元素放在一个div标签里，此时当 top 的值大于该标签到浏览器窗口的上边距离时才有效果，此时他是固定定位，但是他出现的范围只限于在他的父元素之内。
需注意：元素光设置该属性并不会让元素起任何变化，必须至少指定 top,right,bottom 或 left 四个属性值其中之一才生效。
2、z-index属性（设置元素的堆叠顺序）
z-index 只能在 position 属性值为 relative、absolute、fixed 的元素上有效。当元素使用了一些定位而发生重叠时，可以使用 z-index 属性指定哪个元素在上面，哪个在下面。
元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
详细可参考：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
CSS position属性
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释：
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。
CSS position属性在代码中的应用
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括ie8和之前版本ie浏览器，ie9、ie10还没测试过），以下是对position五个值的解释：
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。
1、absolute（绝对定位）
absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。具体案例如下：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position:absolute定位</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
list-style:none;
}
.center{
margin:30px;
border:#999999 solid 10px;
width:400px;
height:300px;
}
.div1{
width:200px;
height:200px;
background:#0099FF;
/*设定TRBL*/
position:absolute;
left:0px;
top:0px;
}
.div2{
width:400px;
height:300px;
font-size:30px;
font-weight:bold;
color:#fff;
background:#FF0000;
}
</style>
</head>
<body>
<div>
<div></div>
<div>position:absolute定位测试</div>
</div>
</body>
</html>这段代码产生的效果如下：
这是设定TRBL之后的效果(设置TRBL以浏览器左上角为原点)，当没有设置TRBL时（没有设置TRBL是以父级对象的坐标为原点），即将p1改成如下代码时
.div1{
width:200px;
height:200px;
background:#0099FF;
/*没有设定TRBL*/
position:absolute;
}则效果如下：
2、relative（相对定位）
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。具体案例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position:relative定位</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
list-style:none;
}
.center{
margin:30px;
border:#999999 solid 10px;
width:400px;
height:300px;
background:#FFFF00;
}
.div1{
width:200px;
height:150px;
background:#0099FF;
position:relative;
top:-20px;
left:0px;
}
.div2{
width:400px;
height:150px;
font-size:30px;
font-weight:bold;
color:#fff;
background:#FF0000;
}
</style>
</head>
<body>
<div>
<div></div>
<div>position:relative定位测试</div>
</div>
</body>
</html>代码产生的效果如下：
3、relative与absolute的结合使用
在网页设计时经常会用到浮动来对页面进行布局，但是浮动所带来的不确定因素却很多（例如：IE浏览器的兼容问题）。相对来说，在有些布局中定位使用会更加简单、快捷、兼容性更好（relative与absolute相结合来使用），下面通过网页中的一个实例（网页中的head部分）进行说明，具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body,div,ul,li,a{
margin:0;
padding:0;
list-style:none;
}
a, a:hover{
color:#000;
border:0;
text-decoration:none;
}
#warp,#head,#main,#foot
{
width: 962px;
}
/*设置居中*/
#warp{
margin: 0 auto;
}
#head{
height:132px;
position:relative;
}
.logo{
position:absolute;
top:17px;
}
.head_pic{
position:absolute;
top:17px;
left:420px;
}
.sc{
position:absolute;
right:5px;
top:12px;
}
.sc a{
padding-left:20px;
color:#666;
}
.nav{
width:960px;
height:42px;
line-height:42px;
position:absolute;
bottom:0px;
background:url(img/nav_bj.jpg) no-repeat center;
}
.nav ul{
float:left;
padding:0 10px;
}
.nav li{
float:left;
background:url(img/li_bj.jpg) no-repeat right center;
padding-right:40px;
padding-left:20px;
text-align:center;
display:inline;
}
.nav li a{
font-size:14px;
font-family:Microsoft YaHei !important;
white-space:nowrap;
}
.nav li a:hover{
color:#FBECB7;
}
</style>
<title></title>
</head>
<body>
<div id="warp">
<div id="head">
<div>@@##@@</div>
<div>@@##@@</div>
<div>
<a href="">@@##@@</a>
<a href="">@@##@@</a>
<a href="">@@##@@</a>
</div>
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">团队文化</a></li>
<li><a href="">公司动态</a></li>
<li><a href="">资讯参考</a></li>
<li><a href="">业务中心</a></li>
<li><a href="">合作银行</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="foot"></div>
</div>
</body>
</html>效果如下图：
在上述代码中首先是给head设置relative定位，那么可以看到里面所有的子元素在设置absolute后都会相对head进行定位，而不是相对body定位。这样相对于用浮动来说就简单方便了很多，也不需要担心兼容问题。
以上就是CSS position属性在代码中的应用的详细内容，更多请关注php中文网其它相关文章！
css 聊聊position属性
前言
今天呢，想聊聊css里的position属性。也就是元素定位属性。目的呢，是为了梳理一下自己学习工作中积累的经验。
标准
根据MDN文档，CSS属性 position 用于指定一个元素在文档中的定位方式。另外还需要偏移属性top, right, bottom 和 left来决定了该元素的最终位置。适用于所有元素，没有继承性，会创建层叠上下文。而定位的值一共有5种（？）：
- position：static 默认值
- position：relative 相对定位
- position：absolute 绝对定位
- position：fixed 固定定位
- position：sticky 粘性定位
因为position属性是非常基础的知识，所以在接下来的篇幅中我不会用很多图片或demo演示效果。毕竟这些内容应该是查阅文档或教程就能知道的。
默认值static
当元素的position属性没有设置或者值为static时，元素处于文档流中，且left等偏移属性是不起作用的。文档中还说z-index值无效。我想了一下，如果元素是处于正常文档流中，一般是不会有其他元素与他在层叠上有上下的冲突，所以z-index的应用场景基本是没有的。也许有我漏考虑的地方？除了这些，static也没有什么特殊的地方了。
相对定位relative
设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。但是如果设置了上下左右偏移属性，它会相对于原位置向相应的方向移动，此时元素空间仍存在，周围元素不会重新排列。也就是说，该元素原有的位置上被放置了一块透明的砖块，看不见但摸得着。另外，相对定位元素会创建一个包含块，用于作为内部子元素定位的基点。
包含块的定义：由最近的块级祖先框，表单元格或行内块inline-block祖先框的内容边界（content edge）构成。
包含块的判定：
绝对定位absolute
绝对定位元素会脱离文档流（normal flow），此时其原有空间为0，也就是不存在透明砖块占位。附近元素也会重新排列。同时，该元素会产生格式化上下文（BFC），上下外边距不会合并，不会因为内部浮动元素产生高度塌陷。
之所以要解释一下包含块的定义和判断，是因为绝对定位元素的定位点就是最近的包含块,设置的上下左右偏移属性都是以包含块的左上角为原点（这个跟文字方向有关）。从上图中可以看出，如果绝对定位的祖先元素position属性都是static，那么会相对于初始包含块————body定位。如果存在position属性为其他值的祖先元素，则相对于其创建的包含块定位。
这里其实想跟浮动元素做个对比，看到张鑫旭博客里提到过浮动元素可以看作有宽无高的inline-block元素，而绝对定位则是无宽无高的inline-block元素。至于为什么看成inline-block元素，我也不太记得了~
固定定位fixed
固定定位元素，相对于屏幕视口定位，这种情况下不会因为滚动而改变位置。如果是打印网页，该元素会出现在每个页面中的固定位置。另外，固定定位元素也会创建格式化上下文。
文档中还提到，有一种特殊情况会影响fixed定位。就是当父级元素的transform属性不会none时，固定定位的容器改为该父级元素，而不是视口。这种意外情况是需要注意和避免的。
最后，如果你是个移动端web开发者，还会遇到ios系统webview下fixed布局的一些bug。这些bug可能无法找到完美的解决方案，所以遇到的话就考虑js动态判断修改样式或者直接就重新布局吧。
粘性定位sticky
这个定位方式相信很多人都没见过，因为它是一个试验属性，文档建议尽量不要在生产环境中使用。不过它的功能还是很好用的，可以了解一下。
粘性定位是相对定位和固定定位的结合体。根据上下左右的偏移属性设置阈值。若相对定位时超过阈值会转变为固定定位。
由于是新属性,所以去这个demo看看吧。
demo中，代码主要是
dt{
position: -webkit-sticky;
position: sticky;
top: -1px;
}首先，从粘性定位在浏览器中的支持情况可以看到基本都支持了，除了ie。不过在火狐中不支持table相关元素，chrome中不支持thead和tr等元素。因此想要正常使用，可能需要加上-webkit等前缀。
其次，设置top:-1px作为阈值。当元素作为相对定位元素时，如果其顶部相对于包容块的距离>=-1px，就会转变为固定定位。所以要使用粘性定位，阈值的设置是关键。
除了demo中展示的功能，粘性定位的应用场景还可以用在所谓的sticky footer中。相信有很多时候产品都会要求这样的布局吧~
宽度受限的定位元素
很多时候，我们将绝对定位的元素垂直水平居中使用的是
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
width:50%;
height:50%;
margin:auto;这种情况下，由于margin设置为auto值，而根据等式:
margin+border+padding+width=元素宽度/高度
所以会设置margin为相应方向上空余部分的一半，实现居中的情况。
但是，绝对定位元素不是脱离文档流了吗？为什么margin还会起作用呢？原来是因为我们还设置了上下左右偏移属性。一般我们只需设置上或下、左或右，如果同时设置了上下或左右，也就是说，对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。此时，绝对定位元素的宽度就会随着包含块的宽度进行适应。这种情况下的绝对定位元素就和正常文档流的元素一样，可以使用margin：auto进行居中了。
display/float/position之间的三角关系
- 当元素设置成绝对定位或固定定位时，浮动属性无效，display也被改为block值。也就是说此时的元素都是块级元素。
- 如果display设置为none，此时元素消失，设置的position和float属性自然没有意义。
总结
花了2个小时，查文档、书和博客，总结了position属性的概念、应用场景和表现方式。还有一些相关知识只是一笔带过，比如BFC、文档流、外边距合并等等，以及文档文字方向这种不太常见的知识。
尽管如此，我觉得仅position属性而言，我已经将自己目前遇到的点都讲述清楚了。还是有点小成就感的，哈哈。
CSSposition属性
在CSSposition属性中，absolute和relative的结合使用是非常重要的东西。因为网页设计时用absolute和relative的相结合非常便利。
首先看relative,相对定位，在菜鸟教程上的解释是：相对定位元素的定位是相对其正常位置。而absolute，绝对定位，在菜鸟教程上的解释是：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 基础部分就不说了，主要他两的结合使用，在网页设计时，你可以对第一个元素进行相对定位relative，而第二个用absolute绝对定位，作为一个子级，而relative作为一个父级存在。很明显的例子就是CSS轮播图的制作：
<html>
<head>
<meta charset="utf-8" />
<title>#</title>
<style>
#rela{
height: 450px;
width: 800px;
margin: 0;
position: relative;
overflow: hidden;
}
.abos{
width: 800px;
height: 2300px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id=resa">
<div>
<a href="#.html"> <img src=#" alt="#" width="800px" height="450px"/></a>
<a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a>
<a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a>
<a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a>
<a href="#.html" ><img src="#" alt="#" width="800px" height="450px"/></a>
</div>
</div>
</body>
</html>
以上的结果就是，abso元素会绝对定位在rela元素中，并且超出部分会被overflow隐藏，并且不会影响到abso。
今天关于CSS中的position属性和css中的position属性值的分享就到这里，希望大家有所收获，若想了解更多关于CSS position属性、CSS position属性在代码中的应用、css 聊聊position属性、CSSposition属性等相关知识，可以在本站进行查询。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
