0

I am trying to create a div (show) at top-right of the window which look like button. If the user click it then another div (form) should open up along with div (show) sliding down. So i used jquery slideToggle to Take Care of it. Now, if I click the div (show) it slideToggle div (form) but this two divs moves the third div (ano) down. That is this two affect other divs. I want this two div open up like a slider without affecting other I guess it should come at the top index. Here is the code

<html>
  <head>
    <script src="jquery.js"></script>
    <style type="text/css">
      .ano {
         background-image:url('pic1.jpg');
         position:
       }
      .show {
         display: block;
         margin-top: -10px;
         background-image:url('button.png');
         margin-left: 85%;
         background-repeat:no-repeat; 
       }
      .form {
         display: block;
         margin-top: -10px;
         background-image:url('slider.png');
         background-repeat:no-repeat;
         margin-left: 85%;
       }
      body {
         background-image:url('bg.jpg');
      }
  </style>
</head>
<body>

   <div class="form">
     Here are some content
   </div>
   <div class="show">
     click me
   </div>
   <div class="ano">
     different div
   </div>

<script>
   $(".show").click(function() {
     $(".form").slideToggle();
   });
</script>

4

2 回答 2

2

试试看：

.ano
{
background-image:url('pic1.jpg');
position:absolute;
top:20px;
}

希望它会帮助你..!!

于 2013-05-16T07:17:03.127 回答
1

这是你可以做到的。您可以包装表单并显示在另一个 div 中，该 div 固定在右上角：

.sitInCorner {
    position:fixed;
    top:0;
    right:0;
    width:15%;
}

演示

无论如何，这将始终使.showand.form位于右上角，并且不会影响页面上的任何其他元素。

希望这能满足您的要求！^_^

编辑：

如果您希望.form标签开始隐藏，请将其添加到 CSS：

display:none;

演示

于 2013-05-16T07:17:49.010 回答