CSS绝对定位&Z-Index

编程基础网前端问题

2022-01-01

CSS Absolute Positioning amp; Z-Index(CSS绝对定位Z-Index)

本文介绍了CSS绝对定位&Z-Index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有以下HTML：

.wrapper {
  position: relative;
  z-index: 99;
}

.red, .green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  z-index: 400;
}

.green {
  background: green;
}

<div class="wrapper">
  <div class="red"></div>
</div>
<br>
<div class="wrapper">
  <div class="green"></div>
</div>

我希望红色框出现在绿色框的顶部。但它没有。.wrapper只有99的z-index，而.red有z-index: 100。顶部是否有黑客TOP PRODUCT.red？

提前感谢！

推荐答案

您不希望给包装同时包含这两个divaz-index，因为它同时包含这两个div。请删除.wrapper上的z-index。并保留400的.red类az-index，红色框将出现在绿色框的顶部：

.wrapper {
  position: relative;
}

.red, .green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  z-index: 400;
}

.green {
  background: green;
}

<div class="wrapper">
  <div class="red"></div>
</div>
<br>
<div class="wrapper">
  <div class="green"></div>
</div>

这篇关于CSS绝对定位&Z-Index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

编程基础网

本文标题为：CSS绝对定位&Z-Index

上一篇： CSS-在屏幕底部对齐div，不使用位置：绝对

下一篇：如何使用jQuery等待CSS3转换结束？

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX