css z-index属性

时间: 2019-09-23阅读: 2124标签: 属性

z-index 属性用来控制元素在 z 轴上的顺序


1. 适用范围

z-index 仅适用于定位元素。即 postition 值为 relative, absolute 和 fixed 属性


2. 作用

指定当前元素的 堆叠顺序创建新的 堆叠上下文

2.1 什么是堆叠顺序

堆叠顺序是当前元素位于 z 轴上的值。值越大表示元素越靠近屏幕,反之元素越远离屏幕在同一个堆叠上下文中, z-index 值越大,越靠近屏幕。
除了 z-index 控制着元素的 堆叠顺序,还有其他因素控制着元素的 堆叠顺序,如下:
<img src="https://www.github.com/hileix/blogs/raw/master/src/assets/堆叠顺序.png">

2.1 什么是堆叠上下文?

堆叠上下文 是一个在该元素内的堆叠顺序不会影响到其他堆叠上下文堆叠顺序的一个 环境html 文档默认的堆叠上下文: html 元素


3. 其他

元素的堆叠顺序不会高于(或低于)父元素的堆叠顺序


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7016

关闭

常用的CSS属性

页面渲染时,dom元素所采用的 布局模型,可以通过 box-sizing 进行设置,根据计算高度的区域可分为:content-box (W3C 标准盒模型),border-box (IE盒模型)

Css边框阴影:box-shadow属性

box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个或者多个阴影的属性。 语法:box-shadow: h-shadow v-shadow blur spread color inset. h-shadow: 阴影的水平位置 v-shadow:阴影的垂直位置 blur

css常用属性

text-align 属性规定元素中的文本的水平对齐方式。属性值:none | center | left | right | justify;font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值。

CSS锚点

position属性定义建议元素布局所用的定位机制,z-index属性:检索或设置对象的层叠顺序,锚点链接:网页制作中超链接的一种,像定位器一样是一种页面内的超链接,设置锚点链接的方法:

input placeholder属性的样式修改

有时需要修改placeholder的文字颜色,需要用使用 input::-webkit-input-placeholder 选中,然后进行样式设置

Vue之计算属性

模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护,在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时

CSS属性white-space

本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。normal默认值,正常换行,空白和换行符会被浏览器忽略。啥意思呢?

css3的calc属性不生效问题

css3的 calc:计算属性。由于自己做的项目中这个属性不常用到,偶尔用一次还没效果。后来研究了下是因为运算符两边没加空格。

HTML 标签的 for 属性

for 属性规定 label 与哪个表单元素绑定。隐式和显式的联系label通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式

css3新增的属性有哪些?

CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3新增了很多的属性,下面一起来分析一下新增的一些属性:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!