Position a Div in Front of Another

Question

I am trying to do something really simple here, I want a div with no border but a solid background color to be OVER a div with a border. This means I want the border around the second div to disappear behind the top div when they intersect. This is how the divs look as currently constructed:

Note here that I want DSP Name Settings to appear OVER the top border line. I have been using z-index but it changes essentially nothing. Here is my code as of right now. With the following CSS styles, that according to all Documentation, SHOULD be putting the title on top of the border as I would like, but isn't.

<div>
                <div class="set-preferences-name-data-title">
                    <h5 class="set-preferences-name-data-title-text">DSP Name Settings</h5>
                </div>
                <div>
                <div class="set-preferences-name-data">
                    <Form>
                        <Form.Group controlId="name" onChange={(event) => handleInput(event)}>
                            <Form.Control 
                                type='name'
                                placeholder={"name"}
                                style={{
                                    textAlign: 'center',
                                    border: '1px black',
                                    color: 'black',
                                }}
                            />  
                        </Form.Group>
                        <Form.Group controlId="shortcode" onChange={(event) => handleInput(event)}>
                            <Form.Control 
                                type='shortcode'
                                placeholder={"shortcode"}
                                style={{
                                    textAlign: 'center',
                                    border: '1px black',
                                    color: 'black',
                                }}
                            />  
                        </Form.Group>
                        <Form.Group>
                            <DropdownButton id="dropdown-basic-button" title={"TimeZone"}>
                                <Dropdown.Item><Button className="set-preferences-dropdown-button" variant="info" onClick={() => handleSetTimeZone('EST') } size='lg'>Eastern Standard Time</Button></Dropdown.Item>
                                <Dropdown.Item><Button className="set-preferences-dropdown-button" variant="info" onClick={() => handleSetTimeZone('CT') } size='lg'>Central Time</Button></Dropdown.Item>     
                                <Dropdown.Item><Button className="set-preferences-dropdown-button" variant="info" onClick={() => handleSetTimeZone('MT') } size='lg'>Mountain Time</Button></Dropdown.Item>                                
                                <Dropdown.Item><Button className="set-preferences-dropdown-button" variant="info" onClick={() => handleSetTimeZone('PST') } size='lg'>Pacific Standard Time</Button></Dropdown.Item>                            
                            </DropdownButton>
                        </Form.Group>                        
                    </Form>
                </div>
                </div>
            </div>

.set-preferences-name-data {
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 5%;
  padding-top: 30px !important;
  padding: 6px;
  border: solid;
  border-width: 2px;
  border-color: '#E2E8F1' !important;
  position: relative;
  z-index: -100 !important;
}

.set-preferences-name-data-title {
  position: absolute;
  margin-top: 20px !important;
  background-color: 'white' !important;
  color: 'white';
  border: solid;
  border-width: 2px;
  border-color: '#E2E8F1' !important;
  z-index: 20 !important;
}

.set-preferences-name-data-title {
  position: absolute;
  background-color: 'white' !important;
  padding-left: 3px;
  padding-right: 3px;
  z-index: 4 !important;
  left: 36.8%;
  top: 3%;
}

<div>
  <div class="set-preferences-name-data-title">
    <h5 class="set-preferences-name-data-title-text">DSP Name Settings</h5>
  </div>
  <div>
    <div class="set-preferences-name-data">
      <Form>
        <Form.Group controlId="name" onChange={(event)=> handleInput(event)}> // I've commented out the first text input because it is irrelevant to the issue
        </Form.Group>
        <Form.Group controlId="shortcode" onChange={(event)=> handleInput(event)}> // I've commented out the second text input because it is irrelevant to the issue
        </Form.Group>
        <Form.Group>
          <DropdownButton id="dropdown-basic-button" title={dsp.timeZone}>
            // I removed the DropDown items since they're irrelevant to this issue
          </DropdownButton>
        </Form.Group>
      </Form>
    </div>
  </div>
</div>

The code that's in question is only rendered if a specified condition is met, so I will also post the main return of the React Component so to make everything a little more clear...

return(
        <div>
            <h1 className="set-preferences-title">Set ScoreCard Preferences</h1>
            <div>{renderNameSettings()}</div>
            <div className="PrefHeaderBox">
                <h2 className="set-preferences-header">
                    Here, you will be able to select at what point values for specific
                    ScoreCard values will be deemed 'fantastic', 'good' and 'fair'. Any time a value is 
                    higher than a 'fair' descending value or lower than a 'fair' ascending one, this 
                    value will be deemed 'subpar.' This will be reflected by what color the text pops up 
                    in for both you and your drivers
                </h2>
            </div>
       // The rest has been cut off since there is no relation to the rest of the component and the issue

Answer 1

Just set a background-color on the top div:

.set-preferences-name-data-title {
  background-color: white;
}