Question

看看这张图片：

enter image description here

我想使用div创建一个靠近浏览器右下角的对话框。页脚固定＆amp;它的高度是50px＆amp;对话框Div将位于页脚和顶部的顶部。如图所示，在浏览器的右下角。

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

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

Answer 1

如果您希望元素在不考虑滚动的情况下粘住，请使用position: fixed：

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

Answer 2

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

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

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

如果你的页脚有position:fixed，那么它会模糊到达（或经过）浏览器视口底部的任何页面内容。

Answer 3

你应该使用css

#dialog{
    position:fixed;
    bottom:50px;
    right:0px;
}

Answer 4

希望这有助于男人，

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

例如： Fiddle

Answer 5

<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>

Answer 6

工作演示：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;
}

（CSS）如何将Div放置在浏览器右下角附近相对于浏览器大小？

6 个答案: