position css简书(css中position的属性值)
position css简书(css中position的属性值)，新营销网红网本栏目通过数据整理汇集了position css简书(css中position的属性值)相关信息，下面一起看看。
提示：点击上方蓝色字体即可订阅！
51RGB官方微信位置是CSS中非常重要的属性。通过position属性，我们可以使元素偏离其正常位置、父元素或浏览器窗口。Postion也是初学者不容易理解的属性。本文将从最基础的知识出发，谈谈正电子属性的一些理论和应用。
基本的知识定位属性叫做定位。它有四种不同类型的定位，这些类型会影响元素的生成方式。下面我们来详细解释一下位置属性。
四种位置类型(1)静态
Static是position属性的默认值。默认情况下，块级元素和行内元素根据各自的特征显示。
(2)相对
Relative翻译成中文就是相对定位。设置该属性后，元素将根据上、左、下、右进行偏移。关键是还保留了它原来的空间。让我们看看下面的例子：
HTML代码
一
2
3
分区/分区
分区/分区
CSS代码
半铸钢钢性铸铁(Cast Semi-Steel)
一
2
div { background: # 0094ff宽度： 250 px；height: 100px}。相对{ background: # ff6a00位置：相对；宽度： 200 px；height: 100pxtop: 20pxleft: 50px}
翻译
相对效应
在这个例子中，div.relative是相对定位的，left设置为20px，left设置为50px，从父元素偏移，占用了原来的空间，后面的元素不会替换。
(3)绝对
当该元素设置为absolute时，它将离开文档流，它不会占用原来的空间，后面的元素将替换它。而且无论元素是inline还是block级别的元素，都会生成一个block级别的框，也就是比如inline元素span设置为absolute后，可以设置高度和宽度属性。请看下面的例子：
HTML代码
一
2
3
span /span
分区/分区
一
2
div { background: # 0094ff宽度： 250 px；height: 100px}。绝对{ background: # ff6a00位置：绝对；宽度： 200 px；height: 100pxtop: 20pxleft: 50px}
翻译
绝对效果
如图，当span标签设置为绝对定位时，可以设置高度和宽度属性，它不占用原来的空间，下面的div元素会代替它。
(4)4)fixed fixed的表达式类似于absolute，但与absolute对不确定父元素的偏离相比，fixed是对浏览器窗口的偏离。
块包含在详细的CSS float属性中。我们提到了包含块的概念。对于位置属性，还有包含块的属性，这将在几种情况下讨论：
1.根元素的包含块。根元素通常是html元素。有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个窗口大小的矩形。
2.非根元素的包含块。如果元素的位置是相对的或静态的，其包含块是最近的块级框、表格单元格或内联块的内容边界。
我们举个例子来说明一下，
HTML代码
一
2
3
四
5
6
差异
是我的父元素的内容。
Div相对定位元素
/div
/div
包含块
这是相对定位元素的包含块，它是最近的块级框、表格单元或行内块的内容边界。相对定位元素从其包含块偏移，可以简单理解为从其原始位置偏移。
3.非根元素的包含块。如果这个元素的位置是绝对的，那么包含它的块就是其最近位置不是静态的祖先元素。简单地说，它的包含块将从父元素向上搜索，直到找到位置不是静态的第一个元素。
offset属性在前面的例子中已经涉及到了，它指的是一个元素相对于它包含的块的偏移量。我们称之为偏移属性，是上、下、左、右，依次代表上、下、左、右。它们的值可以是特定的值或百分比。如果是百分比，top和bottom是相对于包含块的高度的百分比，left和right是相对于宽度的百分比。它们还可以设置负值，也就是说，可以将元素移动到包含块之外。
绝对定位接下来，我们来看看绝对定位。
位的详细细节。
基本的绝对定位
一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
一般来说，我们会将一个元素设置为relative来作为absolute元素的包含块，我们看看下面的例子：
HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div >
相对于初始包含块定位
/div
br /
br /
br /
br /
br /
br /
div >
div >
相对于最近relative祖先元素定位
/div
/div
1
2
3
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
.absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
效果图
基本的绝对定位
如图所示，有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的包含块是body，根据body进行偏移，第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。
绝对定位的重叠问题
元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。看看下面的例子：HTML代码
1
2
3
4
5
6
7
8
div >
div >
相对于最近relative祖先元素定位1
/div
div >
相对于最近relative祖先元素定位2
/div
/div
1
2
3
4
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; }
.absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
.light { background: #f3d6d6; top: 70px; left: 80px; }
效果图
绝对定位的重叠问题
我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10，结果如下
绝对定位的重叠问题
如果两个元素的层级相同，则越后面的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。
固定定位
fixed定位很简单，类似与absoulte，但是它的包含块就是浏览器窗口，相对来说简单很多。常见的应用比如固定导航，回到顶部。在这里不再赘述，大家可以查找相关资料。
相对定位
relative定位的元素进行偏移后，不会脱离文档流，还有占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。我们看看下面的例子：HTML代码
1
2
3
4
5
6
div >
未相对定位的元素
/div
div >
负margin元素
/div
1
2
3
4
div { background: #0094ff; width: 250px; height: 100px; }
.no-relative { background: #ff6a00; width: 200px; height: 100px; }
.relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }
.minus-margin { margin-top: -30px; }
效果图
未相对定位时没有覆盖
默认情况下，两个元素都是正常的元素，设置了负的margin属性后，后面的元素会覆盖前面的元素，我们修改第一个元素的class为relative，可以看到效果如下：
相对定位时覆盖
添加了相对定位后，第一个元素就会覆盖其他正常的元素了。
relative属性最经常的一个应用应该是作为absolute元素的包含块了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其包含块。
应用举例
position的应用非常频繁，下面我来说说常见的一些场景：
产品标签
在电商网站中，我们常常可以看到产品的左上角或右上角有一些比如“新品”，“促销”，“热卖”等标签，比如下图：
产品标签
这个是怎么实现的呢，我们来模拟一下：HTML代码：
1
2
3
4
5
6
div >
我是产品
span >
热卖
/span
/div
CSS代码：
CSS
1
2
.product { width: 150px; height: 150px; background: #0094ff; position: relative; }
.hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }
效果如下：
产品标签
如图所示，右上角有一个标签。原理很简单，就是设置父元素相对定位，标签元素绝对定位，然后相对于父元素偏移到右上角。
自动完成框
自动完成框是一个非常常见的应用，其生成的下拉菜单也是用到了position属性。我们先看看下面的效果：
、
自动完成输入框
这是一个很简单常见的下来自动完成框，我们来看看它的HTML和CSS代码：HTML代码
1
2
3
4
5
6
7
input >
ul >
li position属性 /li
li position应用 /li
li position是什么 /li
li position翻译 /li
/ul
1
2
3
4
.search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }
ul, li { list-style-type: none; }
ul { border: 1px solid #ccc; width: 210px; position: absolute; }
li { padding: 5px; }
这个原理也很简单，通过设置下拉菜单为绝对定位，然后设置其left属性与输入框对齐。
当然position的应用还有很多，比如布局，比如fixed可以用来做固定导航菜单，网页右下角的固定菜单等，有兴趣的同学可以自行查找相关资料进行学习。
总结
position属性是一个容易让初学者迷惑的属性，尤其是absolute和relative的应用。要用好它们，首先要从absolute和relative的基本特性开始了解，理解了他们的特性之后应用起来就得心应手了，了解基本原理后，多多写几个例子从实践中去体会它们的特性，慢慢的就会熟悉了。
positionposition（position 和 display 的取值和各自的意思和用法）
更多position css简书(css中position的属性值)相关信息请关注本文章，本文仅仅做为展示！