htmlposition属性作用,CSS学习之浅谈position属性

本篇文章给大家浅谈一下CSS position属性。有一定的参考价值&＃xff0c;有需要的朋友可以参考一下&＃xff0c;希望对大家有所帮助。

文章目录position: static

position: inherit

position: relative

position: absolute

position: fixed

position:sticky

z-index

参考

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值&＃xff1a;position: static

position: inherit

position: relative

position: absolute

position: fixed

position: sticky(new)

依次讲解这6个值的应用。

position: inherit

inherit 值如同其他 css 属性的 inherit 值&＃xff0c;即继承父元素的 position 值。

position: relative

relative元素遵循正常的文档流&＃xff0c;所以周围元素不会忽略它的存在&＃xff0c;relative 元素同样支持 top,bottom,left,right等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果&＃xff0c;但是区别在于&＃xff0c; relative 元素周围的元素将会忽略 relative 元素的移动。我们注意&＃xff0c;当 relative 元素未使用定位属性进行相对定位时&＃xff0c;它不会被周围的元素忽略&＃xff0c;但利用定位属性进行定位后&＃xff0c;周围的元素会忽略 relative 元素的移动&＃xff0c;它们会认为 relative 元素仍然在原来的位置&＃xff0c;并未进行移动&＃xff0c;我们用个例子来说明&＃xff1a;

//并未忽略 relative 元素的存在

//忽略了 relative 元素的移动

position: absolute

absolute元素将会脱离正常的文档流&＃xff0c;所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时&＃xff0c;我们可以使用 top,bottom,left,right 等属性对 absolute元素进行绝对定位。一般情况下定义两个属性&＃xff0c;top 或 bottom,left 或 right。

这个绝对定位需要稍微理解下&＃xff0c;因为这里容易与 relative 产生混淆。

例如&＃xff0c;当对 absolute 元素添加 left:10px定位后&＃xff0c;这个 left 究竟是对哪个元素而言呢&＃xff1f;其实&＃xff0c;此时将会往上查找absolute元素的第一个父元素&＃xff0c;如果该父元素的 position 值存在(且不为 static),那么这个 left:10px 就是根据该父元素进行的定位&＃xff0c;否则将会继续查找该父元素的父元素&＃xff0c;一直追溯到某个父元素具备不为 static 的 position 值为止&＃xff0c;如果不存在满足条件的父元素&＃xff0c;则会根据最外层的 window 进行定位。

//直接忽略 absolute 元素的存在

position: fixed

fixed 元素将会脱离正常的文档流&＃xff0c;所以它与 absolute 元素很相似&＃xff0c;同样会被周围元素忽略&＃xff0c;支持top,bottom,left,right 属性&＃xff0c;但两者仍有很大不同。

首先&＃xff0c;fixed 元素定位与它的父元素无任何关系&＃xff0c;它永远是相对最外层的 window 进行定位的。

第二&＃xff0c;fixed 元素正如它的名字一样&＃xff0c;它是固定在屏幕的某个位置&＃xff0c;它不会因为屏幕的滚动而消失。

position:sticky

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位&＃xff0c;之后为固定定位。例如&＃xff1a;

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前&＃xff0c;元素为相对定位。之后&＃xff0c;元素将固定在与顶部距离 10px 的位置&＃xff0c;直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时&＃xff0c;始终处于 A 的下方。而在开始滚动 B 部分时&＃xff0c;B 的头部会固定在屏幕顶部&＃xff0c;直到所有 B 的项均完成滚动后&＃xff0c;才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一&＃xff0c;才可使粘性定位生效。否则其行为与相对定位相同。

HTML 内容:

CSS 内容

* {

box-sizing: border-box;

}

dl {

margin: 0;

padding: 24px 0 0 0;

}

dt {

background: #B8C1C8;

border-bottom: 1px solid #989EA4;

border-top: 1px solid #717D85;

color: #FFF;

font: bold 18px/21px Helvetica, Arial, sans-serif;

margin: 0;

padding: 2px 0 0 12px;

position: -webkit-sticky;

position: sticky;

top: -1px;

}

dd {

font: bold 20px/45px Helvetica, Arial, sans-serif;

margin: 0;

padding: 0 0 0 12px;

white-space: nowrap;

}

dd &＃43; dd {

border-top: 1px solid #CCC

}

兼容性如图所示&＃xff1a;

z-index

为什么要在这里提到 z-index 属性呢&＃xff1f;那是因为 z-index 属性只对定位元素有效&＃xff0c;即position值为absolute,relative,fixed时才有效。我们首先了解下什么叫 z-index。

从上图我们不难发现 z-index 值代表的是元素的堆叠顺序&＃xff0c;值越高则显示顺序越优先。

//fixed 元素 z-index 比 absoulute 元素高&＃xff0c;所以显示在前面

(我把背景色调为非透明&＃xff0c;这样可以看得更清楚)&＃xff0c;假如 z-index 值相同会出现什么情况呢&＃xff1f;

//z-index 值相同&＃xff0c;仍然显示为 fixed 元素

所以我们知道&＃xff0c;当 z-index 值相同时&＃xff0c;后加载的元素显示优先。

关于z-index属性, 上下的层次关系也是按照树状结构进行层次划分的, 优先父元素之间的分集, 子元素这层次排序依赖于父元素的层次.

例如:

某A元素z-index:1; 其父元素z-index:100,

某B元素z-index:100; 其父元素z-index:99,

某C元素z-index:2; 其父元素与A父元素相同

则浏览器之中A元素的显示层次一定优高于B元素; C显示的层次高于A元素;

参考

本文转载自&＃xff1a;https://www.cnblogs.com/moqiutao/p/4781830.html

更多web前端开发知识&＃xff0c;请查阅 HTML中文网 &＃xff01;&＃xff01;