CODEWITHSUNDEEP
cssreactjs
Strahinja Ajvaz
Strahinja Ajvaz

Reputation: 2633

how to put child element ontop of parent

I have the following issue.

This is my html code: 

<div className="search_artist ">
    <p className="search_artist__heading">Find a band/artist</p>
    <div className="form-group">
        <input type="text" class="form-control" id="usr"/><button className="btn"onClick={this.searchArtists}>Search</button>
    </div>
</div>

This is my SCSS:

.search_artist {
    margin: 44px auto;
    width: 908px;
    border-radius: 10px;
    opacity: 0.15;
    position: relative;
}

.search_artist > * {
    position: relative;
    z-index: 100;
}

.search_artist__heading {
    text-align: left;
    font-size: 2rem;
    color: white;
}

Im trying to put all children elements under search_artist to be on top of the div so that the opacity doesn't affect them.

Can I please get any input as to where I'm going wrong?

Upvotes: 1

Views: 174

Answers (2)

Jakub Muda
Jakub Muda

Reputation: 6694

The opacity property is inherited by all child element of a parent. I suppose you need opacity for a background and you tried using opacity property. You can try using a background color with alpha (opacity). Example:

parent{
    background:rgba(0,0,0,.3)
}

First 3 values are normal rgb values, last one is alpha (opacity) with values 0 to 1

Upvotes: 2

rishijd
rishijd

Reputation: 1334

https://www.w3schools.com/cssref/css3_pr_opacity.asp

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

opacity applies to all the child elements. It doesn't matter if elements are "on top of the div" as you state (and I believe you're trying to achieve this through z-index but these are all still children of the parent, so the z-index doesn't matter). If you just want the background color to be opaque, then you can see a RGB background color instead with transparency, rather than the opacity attribute. Does this answer your question?

Upvotes: 3

Related Questions