handling z-index in css

Question

I need to add division top of the my form. i need to reduce alpha (rgba) then form element will be show. (this should be responsive also). please check my code

.top-div {
  background-color: rgba(0, 0, 255, 0.3);
  position: relative;
  z-index: 10
}

.form {
  position: relative;
  z-index: 1;
}

<div class="top-div">
  <form class="form">
    Name <input type="text" /> Age
    <input type="text" /> Address
    <input type="text" />
  </form>
</div>

mainly i need to add color with alpha to my top div. check my image

Something like [this](https://jsfiddle.net/7oc5f6p8/)? – Sfili_81 Jun 24 '20 at 06:35 — Sfili_81, Jun 24 '20 at 06:35

Karl L · Accepted Answer · 2020-06-24T06:59:07.940

It should be something like this. but take note that you need to change the z-index of .form to something like z-index:3; which is higher than .top-div:after to uncover the form or to make it accessible.

.top-div {

  position: relative;

}

.form {
  position:relative;
  padding: 10px; 
  z-index:1;
}

.form fieldset {
  display: table;
  border: none;
}

.form label {
  width: 20%;
  float: left;
  margin-bottom: 12px;

}

.form input {
  width: 70%;
  float: left;

}

.top-div:after {
  background-color: rgba(0, 0, 255, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  z-index:2;
}

<div class="top-div">
  <form class="form">
    <fieldset>
      <label>Name</label> 
      <input type="text" />
    </fieldset>
    <fieldset>
      <label>Age</label>
      <input type="text" />
    </fieldset>
    <fieldset>
      <label>Address</label>
      <input type="text" />
    </fieldset>
  </form>
</div>

Eytan · Answer 2 · 2020-06-24T07:20:15.637

Not really sure what you're trying to achieve but it seems like the form shouldn't be inside your .top-div, perhaps beneath it such as:

.top-div {
       background-color: rgba(0, 0, 255, 0.3);
       position: relative;
       top:-50px;
       height: 100px;
    }

    .form {
       position: relative;
       height:50px;
    }

<form class="form">
    Name <input type="text" />
    Age <input type="text" /> 
    Address <input type="text" />
</form>
<div class="top-div"></div>

handling z-index in css

2 Answers2