-1

看看这张图片：

在此处输入图像描述

我想使用 div 创建一个靠近浏览器右下角的对话框。页脚是固定的，其高度为 50 像素，对话框 Div 将位于页脚的正上方和浏览器的右下角，如图所示。

注意：要求是 Div 必须位于相对于浏览器大小所需的位置。这意味着当用户缩小以扩展浏览器时，div 也会被移动，但无论 div 是如何移动的，它都应该始终处于如图所示的所需位置。

那么，我怎样才能在 CSS 中做到这一点呢？

4

6 回答 6

5

如果您希望元素无论滚动如何都保持不变，请使用position: fixed：

{
    position: fixed;
    bottom: 50px;
    right: 0;
}
于 2013-10-04T13:08:30.677 回答
0

position:fixed相对于浏览器的视口定位元素：

.CLASS_OF_DIALOG_DIV {
    position: fixed;
    right: 0;
    bottom: 50px;
}

但是，如果您的页脚也没有position:fixed，那么它相对于您的对话框将没有正确的位置。

如果您的页脚确实有position:fixed，那么它将掩盖任何到达（或超过）浏览器视口底部的页面内容。

于 2013-10-04T13:08:58.500 回答
0

工作演示：jsFiddle

你的 HTML 可能是

<div class="div1">
    <div class="div2">
    </div>
</div>

在 CSS 中

.div1{
   width: 100%;
   height: 500px; 
   border: 1px solid black; 
   position: relative 
}
.div2{
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 25%; 
    height: 100px; 
    border: 1px solid black;
}
于 2013-10-04T13:17:09.843 回答
0

希望这对男人有帮助，

<div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
</div>

例如： 小提琴

于 2013-10-04T13:12:30.870 回答
0

你应该使用css

#dialog{
    position:fixed;
    bottom:50px;
    right:0px;
}
于 2013-10-04T13:09:57.763 回答
0 
<body>
<div stlye="position:relative; z-index:1;">
  <div class="header"> header of website </div>
  <div clss="main"></div>
  <div clss="footer"> footer of website </div>
</div>
<div style="position:absolude;z-index:10000;right:0px;bottom:20px;"> dialog </div>
</body>
于 2013-10-04T13:14:15.177 回答