Question

我正在尝试在窗口右上角创建一个div（ show ），它看起来像按钮。如果用户点击它，则应打开另一个div（表单）以及div（ show ）向下滑动。所以我用jquery slideToggle来照顾它。现在，如果我点击div（显示），它会滑动div（表单），但这两个div会向下移动第三个div（ ano ）。这就是这两个影响其他div。我希望这两个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>

Answer 1

试一试：

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

希望它会帮助你...... !!

Answer 2

这是你如何做到的。您可以将表单包装并显示在另一个div中，该div已在右上角修复：

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

DEMO

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

希望这可以做你想要的！ ^ _ ^

修改

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

display:none;

DEMO

当我们点击它时，如何制作一个显示另一个div的浮动div

2 个答案: