CSS定位的叠放次序z-index，简单介绍

在使用定位布局的时候，可能出现盒子重叠现象，此时可以使用 z-index 来控制盒子的前后次序。

语法：

选择器 {z-index：1}

数值可以为负数，数值越大，越靠上，越靠近用户。
如果值相同，则按照书写顺序，后来者居上。
只有定位的盒子才有 z-index 属性。

<head><style>.parent{position: relative;width: 300px;height: 300px;border: 1px solid #4c4c4c;}.box1,.box2,.box3 {position: absolute;width: 100px;height: 100px;}.box1 {background-color: hotpink;}.box2 {background-color: khaki;}.box3 {background-color: lightcoral;}</style>
</head>
<body><div class="parent"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div>
</body>

结果：box3在最上面。（默认情况下，z-index值为auto,多个同等级的按加载顺序显示）

现将box2样式里添加，z-index：1，结果

层叠水平：

CSS定位的叠放次序z-index，简单介绍相关推荐

CSS——CSS定位※ ( position )
文章目录定位(position) 为什么要用定位? 元素的定位属性静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 1.父级没有定位 2.父级有定 ...
css 定位脱标,CSS 定位
文章目录定位( postion) 简介静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 四种定位总结叠放次序(z-index) 居中布 ...
CSS基础: 五种定位以及定位叠放次序
前面看到浮动其实可以让某个盒子模块在某个位置,但是为什么还要右定位? 其实很简单,因为浮动有些定位是解决不了的,比如看下图: 在滑动的时候,你发现了没有,那就是标记的地方,拉动网页都在顶部和侧面,如果 ...
定位叠放次序z-index（HTML、CSS）
定位叠放次序z-index(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
css怎么设置z坐标,CSS 定位（postion、z-index）
CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed): 普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,这也是我们最常见的方式, ...
10.【CSS定位】：position、z-index、dispaly(none)、visibility、overflow hot new 模块 + 淘宝焦点图布局 +土豆网鼠标经过显示遮罩
文章目录 [CSS定位] 一.定位 1.1 为什么需要定位? 1.2 定位组成 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute( ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
css 定位兼容性,CSS基础：定位与浏览器兼容性
position属性介绍: CSS position属性用于指定一个元素在文档中的定位方式.top,right,bottom 和 left 属性则决定了该元素的最终位置. position 属性值 ...

CSS定位的叠放次序z-index，简单介绍

层叠水平：

CSS定位的叠放次序z-index，简单介绍相关推荐

最新文章

热门文章