如何把子元素放在父元素的上面

Question

我有以下问题。

这是我的HTML代码：

<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>

这是我的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;
}

我试图将search_artist下的所有子元素放在div的顶部，以便不透明度不会影响它们。

我可以获得关于我出错的地方的任何意见吗？