overlay div elements with the box-shadow property

Asked

Viewed 509 times

1

Hello, By triggering the scroll, i add a class to div-operador, causing a box-shadow, at the top of div-operador.

But as picture below, the input elements, select, etc... are above the shadow.

How do I make the top shadow overlap the elements that are inside the div-operador when rolled up ?

javascritp

$('#div-operador"').scroll(function() {
    var y = $(this).scrollTop();
    if (y > 1) {
	$('#div-operador').addClass('shadow');
    }
    else {
        $('#div-operador').removeClass('shadow');
    }
});

CSS

#div-operador {
   padding-top: 5px;
   overflow: auto;
   width: auto;
   max-height: 205px;
   height: 205px;
}
.shadow {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
    z-index:5;
}

html

<div class="col-xs-8">
   <div id="div-operador" class="col-md-12">
      <div class="row clearfix">
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-perfil">Perfil</label>
                  <select id="sel-perfil" class="form-control input-sm form-md-3" name="perfil"  title="Perfil" autocomplete="off" required >
                      <option>Perfil</option>
                  </select>
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-nivel">Nível</label>
                  <select id="sel-nivel" class="form-control input-sm form-md-3" name="nivel"  title="nivel" autocomplete="off" required >
                      <option>Perfil</option>
                  </select>
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="sel-email">email</label>
                  <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
             </div>
          </div>
          <div class="col-xs-6">
              <div class="form-group">
                  <label for="txt-login">login</label>
                  <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
             </div>
          </div>
       </div>
   </div>
</div>

Upshot

inserir a descrição da imagem aqui

html css

  • But only with this HTML snippet is it not possible to simulate your problem. Please edit and include the rest of the code so that it is possible to simulate the problem. Because this code is very far from what is in the image...

  • This HTML code serves to simulate the problem, the only question, I that there are several cols-xs-6 within the div-operator beyond what is in the example, and the div-operador is inside another div

  • I edited the question and added other details

  • @Wagnerfilho tried to simulate his code for solution, but details of the HTML structure are missing. However when observing superficially you notice that you assign the z-index only to the class you enter via jQuery. Assign z-index directly to the parent class of the element.

  • Didn’t work, added z-index and position relative

1 answer

2


Look I made a model that I believe can fit you. The way you did I also could not make the father’s sombre stand over the input of the son.

So the solution I found was to put another child inside the father (who has the shadow), and that in turn is on top of the brother as expected. I also had to put in this brother position:sticky so he doesn’t disappear when the scroll in the container.

inserir a descrição da imagem aqui

So basically I didn’t change anything in the script, only by doing the scroll in the container I add a class of opacity in the child and not the shadow in the father and it was all right

Follow the code referring to the image above.

$('#div-operador').scroll(function() {
    var y = $(this).scrollTop();
    if (y > 1) {
	$('.teste').addClass('mostra');
    }
    else {
        $('.teste').removeClass('mostra');
    }
});
#div-operador {
   padding-top: 5px;
   overflow: auto;
   width: auto;
   max-height: 205px;
   height: 205px;
   overflow-y: auto;
   position: relative;

   padding: 0;
}
#div-operador .row {
    margin: 0;
}
.teste {
    position: sticky;
    top: 0px;
    left: 0;
    width: 100%;
    height: 7px;
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
    z-index:5;
    opacity: 0;
    transition: opacity 300ms;
}
.mostra {
    opacity: 1;
}
.shadow {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
    z-index:5;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="col-xs-8">
            <div id="div-operador" class="col-md-12">
            
  <!-- irmão com a sobra -->
  <div class="teste"></div>
  
               <div class="row clearfix">
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-perfil">Perfil</label>
                           <select id="sel-perfil" class="form-control input-sm form-md-3" name="perfil"  title="Perfil" autocomplete="off" required >
                               <option>Perfil</option>
                           </select>
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-nivel">Nível</label>
                           <select id="sel-nivel" class="form-control input-sm form-md-3" name="nivel"  title="nivel" autocomplete="off" required >
                               <option>Perfil</option>
                           </select>
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-email">email</label>
                           <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="txt-login">login</label>
                           <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-email">email</label>
                           <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="txt-login">login</label>
                           <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="sel-email">email</label>
                           <input type="text" id="txt-email" class="form-control input-sm form-md-3" name="email" autocomplete="off" required />
                      </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="form-group">
                           <label for="txt-login">login</label>
                           <input type="text" id="txt-login" class="form-control input-sm form-md-3" name="login" autocomplete="off" required />
                      </div>
                   </div>
                </div>
            </div>
         </div>
</div>

  • Perfect, I wouldn’t have thought of the trick of using a class .mostra, let alone use a brother div.. thanks for the solution.

  • @Wagnerson tmj for this problem I could not think of something to solve in the father container I had to use a new son, but I think it solves. Good luck there

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.