我如何定位相对于窗口页面的 div（响应式 css）答案

【问题标题】：How do i position a div relative to the window page (responsive css)我如何定位相对于窗口页面的 div（响应式 css）
【发布时间】：2014-06-19 16:27:42
【问题描述】：

所以我制作了一个按钮来隐藏和显示带有占位符文本的 div：

<button id="btn1">Click to display div1</button>
<div id="div1"></div>

#div1 被定位为绝对原因，我不想修复它。

当我点击我的按钮时，如何让它出现在窗口屏幕中？并且距离窗口屏幕有 10px 的顶部？

还有一个问题，我如何使该 div 居中？

Here is the Fiddle

【问题讨论】：

标签： jquery html css

【解决方案1】：

你觉得怎么样：http://jsfiddle.net/wildandjam/KXW9v/

我所做的是添加到#div1：

top:10px;
left:50%;
margin-left:-250px;

但是我认为要获得与窗口而不是文档相关的“弹出”效果，您可能需要使用固定？

【讨论】：

【解决方案2】：

顶部的值可以直接放到#div1 css like

#div1 {
    top: 10px;
}

因为 #div1 是绝对定位的，所以我会像这样计算 div 的左值：

$("#btn1").click(function(){
    var leftVal = ($(window).width() - $("#div1").width())/2;
    $("#div1").css("left", leftVal);
    $("#div1").fadeToggle(); 
});

因此，每当您切换按钮时，都会获得窗口宽度并将#div1 相对于它居中。只要您的窗口宽度不低于 500 像素，它基本上就是响应式解决方案。我建议对#div1 宽度使用百分比值，这样即使窗口宽度小于 500 像素，这也可以。

小提琴：http://jsfiddle.net/UmC8B/4/

使用响应式 #div1 (70%)：http://jsfiddle.net/UmC8B/7/

【讨论】：

【解决方案3】：

为了让它具有响应性，请在 %age 中为 div 提供宽度和高度，并在 %age 中为按钮添加底部属性。由于我已经为 div 指定了 80% 的宽度，因此只需将 left 属性指定为 10% (10%L + [80%] + 10%R)。希望这是你想要的。

#div1{
  position:absolute;
  background-color:#007c7c;
  width:80%;
  height:25%;
  left: 10%;
  overflow: auto;
  color:white;
}

Demo

【讨论】：

【解决方案4】：

试试这个

$("#btn1").click(function(){

  $("#div1").css("top",($(document).scrollTop() + 10) +'px').fadeToggle(); 

});

让 div 居中

#div1{
    position:absolute;
    background-color:#007c7c;
    width:500px;
    height:500px;
    color:white;
    left:50%;
    margin-left:-250px;
}

工作DEMO

【讨论】：

【解决方案5】：

您的 div 必须在您的 CSS 文件中定位为绝对 - 如果您想隐藏它，您也可以在链接到您的 HTML 页面的 CSS 文件中进行。要切换 div，请尝试：

$("#btn1").click(function() {
    $("#div1").toggle();
});

【讨论】：

嘿，对不起，我并没有真正询问如何让它出现
我在问如何相对于窗口页面定位它