Home/ Questions/Q 6682127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:40:11+00:00

I am trying to create a button using HTML/jQuery that is positioned on the

  • 0

I am trying to create a button using HTML/jQuery that is positioned on the middle left of the screen and hovers over everything else that is displayed. I have a html5 transition animation that moves an element on the screen. The animation appears on top of the button, which is what I don’t want. I’ve tried setting the z-order with absolute positioning but the animation still appears over the button.

How can I place a button to an absolution position on the screen and have all animations appear under it?

Here is some code that demonstrates the problem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>                
    <style>
        pre {
            margin-top:0px;
            margin-bottom:0px;          
        }

        .button {
           border-top: 1px solid #96d1f8;
           background: #65a9d7;
           background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
           background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
           background: -moz-linear-gradient(top, #3e779d, #65a9d7);
           background: -ms-linear-gradient(top, #3e779d, #65a9d7);
           background: -o-linear-gradient(top, #3e779d, #65a9d7);
           padding: 5.5px 11px;
           -webkit-border-radius: 40px;
           -moz-border-radius: 40px;
           border-radius: 40px;
           -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
           -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
           box-shadow: rgba(0,0,0,1) 0 1px 0;
           text-shadow: rgba(0,0,0,.4) 0 1px 0;
           color: white;
           font-size: 24px;
           font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
           text-decoration: none;
           vertical-align: middle;
           }
        .button:hover {
           border-top-color: #28597a;
           background: #28597a;
           color: #ccc;
           }
        .button:active {
           border-top-color: #1b435e;
           background: #1b435e;
           }        

        .container {
            position:relative;
            left:0px;
            display: inline-block;
            padding: 15px;
            background-color: #d8e8f8;
            opacity: 100;
            -webkit-transition:all 1.0s ease-in-out;
            -moz-transition:all 1.0s ease-in-out;
            -o-transition:all 1.0s ease-in-out;
            -ms-transition:all 1.0s ease-in-out;        
            transition:all 1.0s ease-in-out;
        }
    </style>                
</head>
<script>
    $(document).ready(function() {

          function moveSlideLeft(id) {

            var percentage = "translate(-100%, 0px)";
            $(id).css("-webkit-transform",percentage);
            $(id).css("-moz-transform",percentage);
            $(id).css("-o-transform",percentage);
            $(id).css("-ms-transform",percentage);          
            $(id).css("transform",percentage);          
          }       


        $("#slide1").click(function() {
            moveSlideLeft("#container1");
        });
    }); 
</script>   
<body>      

<div class="button" style="float: left">The button</div>

<div id="container1" class="container">
<div id="slide1">

<pre>
Stuff.......................................
Stuff.......................................
Stuff.......................................
</pre>

</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because you have position: relative; on the .container, you need position: relative; and a z-index on the button:

    position: relative;
z-index: 10;
    • 0