Html 外部div背景与内部div重叠

我正在尝试添加内部div，以便在外部div重叠时正确显示它，尝试使用position-absolute，但不起作用，还希望html保持原样，因为我需要外部div的高度调整为内部div的高度

JSFIDLE

HTML

外部div不会“重叠”内部div，只是您在外部div上声明的css属性

opacity

被继承到所有子元素。你对此无能为力

您可能需要的是父div上的半透明背景色，这可以通过rgba颜色实现：

/* for demonstration: */
.outer-div {
    /* replace hex value here with the rgba value below */
    background: #445b22 none repeat scroll 0 0;
    /* opacity: 0.35; <- remove this, it becomes the value for the a channel */
    /* hex #445b22 is rgb(68,91,34) */
    background-color: rgba(68,91,34,0.35); /* <- the a channel is the opacity */
}

编辑： 十六进制到rgb转换的简要说明：

your color:
#44 5b 22 <- hexadecimal values
 r  g  b  
 68 91 34 <- decimal values

white:              black:
#FF  FF  FF         #00 00 00
 r   g   b           r  g  b
 255 255 255         0  0  0

---

我不清楚你想做什么。“正确地看到”是什么意思？不，它不是。。添加

“背景：蓝色”到您的内部div样式，您将看到它们实际上正确显示@Paulie_D现在输入字段显示在背景之前，而不是背景之后。首先，从父对象中删除不透明度值。啊哈，那么在rgba风格中，我在哪里可以生成这个呢？可以看到不透明度是最后一个参数，但其他参数都是。在google上查找转换器工具，有很多：
/* for demonstration: */
.outer-div {
    /* replace hex value here with the rgba value below */
    background: #445b22 none repeat scroll 0 0;
    /* opacity: 0.35; <- remove this, it becomes the value for the a channel */
    /* hex #445b22 is rgb(68,91,34) */
    background-color: rgba(68,91,34,0.35); /* <- the a channel is the opacity */
}

.outer-div {
    background: rgba(68,91,34,0.35) none repeat scroll 0 0;
}

your color:
#44 5b 22 <- hexadecimal values
 r  g  b  
 68 91 34 <- decimal values

white:              black:
#FF  FF  FF         #00 00 00
 r   g   b           r  g  b
 255 255 255         0  0  0

window.prompt("RGB color:",function(string){return "rgb("+(string.match(/^#?(?:(\w\w)(\w\w)(\w\w)$)|(?:(\w)(\w)(\w)$)/).splice(1).filter(function(k){return k!==undefined}).map(function(o){ o=(o.length===1)?o+o:o;return Number.parseInt(o,16)}).join())+")"}(window.prompt("Define hex color","#bada55")))