绝对定位的元素隐藏其之前的透明元素 [英] Absolutely positioned element hides the transparent element before it

问题描述

我有三个相邻的块元素，第一个和最后一个都是透明的，中间的元素是绝对定位的：

  .box {width：300px; height：300px;}。box1 {background：yellow;不透明度：0.5;}。box2 {background：red;位置：绝对;左：0; top：0;宽度：800px; height：800px;}。box3 {background：black; opacity：0.5;}  

< div class =box box1>< / div>< div class =box box2>< / div>< div class =box box3>< / div>< / code&由于 .box1 和

> .box3 设置为 opacity：0.5 ，我认为他们都会通过 .box2 ，但只有 .box3 没有。为什么？

解决方案

您可以使用 z-index

了解更多：

• 添加z索引
  
  $ b

  
  

  此属性分配有一个整数值（正值或负值），它表示元素沿着z轴的位置。如果您对z轴不熟悉，可以想象页面上下有多个图层。每层都编号。具有较大数字的图层会显示在层数较小的图层上。

  
  

  
  
  

  ---

  
  
  

    .box {position：relative;宽度：300px; height：300px;}。box1 {z-index：20;背景：黄色;不透明度：0.5;}。box2 {z-index：10;背景：红色;位置：绝对;左：0; top：0;宽度：800px; height：800px;}。box3 {z-index：30;背景：黑色; opacity：0.5;}  

  < div class =box box1>< / div>< div class =box box2>< / div>< div class =box box3>< / div>< / code& pre>

  
  

  I have three block elements next to each other, the first and last are transparent and the middle one is absolutely positioned:

  .box {
    width: 300px;
    height: 300px;
  }
  .box1 {
    background: yellow;
    opacity: 0.5;
  }
  .box2 {
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    width: 800px;
    height: 800px;
  }
  .box3 {
    background: black;
    opacity: 0.5;
  }

  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>

  Because .box1 and .box3 are set to be opacity:0.5, I thought they would both show through .box2, but only .box3 does. Why?

  解决方案

  You can use z-index (the biggest number is on the top, and the lowest is on the down).

  Learn more :

  • Adding z-index

  This property is assigned with an integer value (positive or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page has several layers one above the other. Each layer is numbered. A layer with a greater number is rendered above layers with smaller numbers.

  ---

  .box {
    position:relative;
    width: 300px;
    height: 300px;
  }
  .box1 {
    z-index:20;
    background: yellow;
    opacity: 0.5;
  }
  .box2 {
    z-index:10;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    width: 800px;
    height: 800px;
  }
  .box3 {
    z-index:30;
    background: black;
    opacity: 0.5;
  }

  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>

  这篇关于绝对定位的元素隐藏其之前的透明元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！