0

ボタンのように見えるウィンドウの右上にdiv ( show )を作成しようとしています。ユーザーがそれをクリックすると、別の div ( form ) が開き、 div ( show ) が下にスライドします。だから私はそれを世話するためにjquery slideToggleを使いました。ここで、div ( show )をクリックすると、それは slideToggle div ( form ) ですが、この 2 つの div は 3 番目の div ( ano ) を下に移動します。つまり、この 2 つは他の div に影響を与えます。この 2 つの div をスライダーのように開いて、他に影響を与えないようにしたいのですが、一番上のインデックスに来るはずです。ここにコードがあります

<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 に表示できます。

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

デモ

これにより、 が常に.show右.form上隅に表示され、ページ上の他の要素には影響しません。

これがあなたが望むことを願っています！^_^

編集：

タグを非表示で開始する場合は.form、これを CSS に追加します。

display:none;

デモ

于 2013-05-16T07:17:49.010 に答える