Gladwin James Gladwin James - 1 month ago 13
CSS Question

Placing one layer above another in css and html

As the question speaks,I'm trying to place one layer above the another,for clear explanation see this fiddle. I am trying to place the

<div class="booking">
behind
<div class="inputtexts">
but sadly i end by doing the opposite which leads to the affect the brightness of the layer
<div class="inputtexts">
. What I mean is if you could remove the
<div class="booking">
in the fiddle you can see all the text in
<div class="inputtexts">
turns bright.

which means
<div class="booking">
is placed above
<div class="inputtexts">
, but what i wanted is to place
<div class="inputtexts">
above
<div class="booking">
so that text in
<div class="inputtexts">
.

Answer

That is because the 0.4 opacity of the .booking also applies to all of its children. If you would just remove the opacity it will work how you want it to.

In case you also want the transparent background, you could use background property in CSS with rgba(0, 0, 0, 0.4) where first three parmas are RGB values and the last one is the alpha value, 0 being transparent.