Question

我遇到弹出式div问题。我希望能够相对于身体定位弹出窗口，使它们不居中。我遇到的问题是它们嵌套在导航div中，我只能将它们相对于它定位，因为它必须绝对定位，因为我希望它出现在屏幕的中心。

所以我遇到的两个问题是：

不能将Div与身体相关联。
当出现div时，他们会将导航项目推到原位。

解决方案：

找到一种方法让div忽略它的当前父div并将其自身定位与body div相关。

下面你可以在jsFiddle中找到我的代码，并提前感谢你的帮助。

HTML

<div id="menu">

    <div id="name"><a href="" title="">name</a></div>

    <ul id="nav">

        <li><a class="pop-up-link" href="#" title="about">about</a>&nbsp; | &nbsp;
            <div class='about'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>
            </div>
        </li>

        <li><a class="pop-up-link" href="#" title="press">press</a>&nbsp; | &nbsp;
            <div class='press'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>
            </div>
        </li>

        <li><a class="pop-up-link" href="#" title="diary">contact</a>&nbsp; | &nbsp;
            <div class='contact'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>
            </div>
        </li>

        <li><a class="pop-up-link" href="#" title="contact">diary</a>
            <div class='diary'><a href='#' title="close" class='close'><img src='img/close.png' alt='close' height="20" width="20" /></a>
                <p>content</p>

            </div>
        </li>

    </ul>
</div>

CSS

body {
    position: relative;
    width: 100%;
    height: 100%;
}

#menu {
    position:fixed;
    overflow: visible;
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
    text-align: center;
}

#name {
    font-size: 26px;
    line-height: 50px;
    vertical-align: middle;
    border-bottom: 1px solid #000;
}

#nav li{
    font-size: 14px;
    width: 300px;
    line-height: 25px;
    vertical-align: middle;
    display: inline;
}

.close { 
    float: right; 
    position: relative; 
    z-index: 99999; 
    margin: 3px 6px 0; 
}

.about { 
    position: relative; 
    padding: 5px; 
    background: #F7E39A; 
    display:none; 
    width:500px; 
    margin: 0 auto; 
    min-height: 200px; }

.press { 
    position: relative; 
    float: right; 
    top: -200px; 
    right: 500px; 
    padding: 5px; 
    background: #DEA1B7; 
    display:none; 
    width:250px; 
    min-height: 200px; 
}

.contact { 
    position: relative; 
    padding: 5px; 
    background: #6666FA; 
    display:none; 
    width:500px; 
    margin: 0 auto; 
    min-height: 200px; 
}

.diary { 
    position: relative; 
    float: left; 
    top: 0px; 
    padding: 5px; 
    background: none; 
    border: #291DFA 1px solid; 
    display:none; 
    width:100px; 
    min-height: 200px; 
}

的jQuery

$(function() {

    var height = $(document).height();
    var width = $(document).width();
    var spanHeight = $('.popup').height();
    var spanWidth = 500;

    $('.pop-up-link').click(function() { 

        $(this).next() 
        .css({ "top" :  height/2 - spanHeight/2 }) // Centre Pop Up
        .css({ "left" : width/2 - spanWidth/2 })    
        .fadeIn(500);
    });

    $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(500);
    });
});

解决方案

我重写了代码，允许弹出窗口是body标签的子代，这样我就可以将它们放在相对于body的位置。我正在使用SimpleModels并使用百分比来定位div。

jQuery(function ($) {
    $('#menu .about').click(function (e) {
        $('#about-content').modal({position: ["20%","65%"]});
        return false;
    });
});

Answer 1

我认为这里的问题是如何使用定位。

绝对定位的元素不再是布局流程的一部分。它们作为自己宇宙中的“层”存在，使用z-index堆叠。

相对定位的元素是布局的一部分 - 因此移动它们可以改变流程。

position:absolute - 这会相对于设置了position:relative的第一个父定位一个元素。如果未设置父级，则该位置将从BODY继承。将其视为设置原点 - 第一个相对定位的父项成为原点。

如果你想定位一个通用对话框，你通常希望它是BODY标签的子项（如果你想将它相对于浏览器窗口定位），或者让它作为外部的孩子布局的包装器（将其放置到布局中，例如当您的设计位于屏幕中心时）。

您通常希望避免在此问题中使用position:relative。

Answer 2

为了解决这个问题，我们将重点关注CSS attribute "position"。但是，由于我们无法看到示例中出现的所有CSS，因此可能存在继承问题。

要从父项的右上角相对定位多个子元素，必须使一些事情成为现实。

父元素的“position”值不等于“static”。
每个子元素的“position”值必须为“absolute”。
每个子元素都应该有一个“顶部”和“左”值（正或负），它描述了它与父元素中标准位置的偏移。

由于我们试图定位的＆lt; div＆gt;在＆lt; body＆gt;内适度深度，我不确定我们是否应该抓住定位的机会，当改变它们之间的元素CSS时可以大大改变我们的定位

我的个人建议是重新定位您想要在＆lt; body＆gt;中定位的＆lt; div＆gt;在DOM上，以便他们是＆lt; body＆gt;的直接子项。然后，将＆lt; body＆gt;的“position”设置为可能是“relative”（可能是不必要的，因为它是根显示的元素），然后我们可以将我的＆lt; div＆gt; s定位为style =“position：absolute; top：NN; left：NN;“，其中NN是某个整数值。这将符合您关于＆lt; body＆gt;的定位目标。

P.S。如果您想要相对于页面上的其他位置（例如，中心），只需创建一个居中的1x1＆lt; div＆gt;使用style =“position：relative;”，然后将定位的元素放在那个元素中。

我认为您会发现css定位在您的网页设计工作中是一项巨大的资产，特别是与z-index等样式结合使用时。我希望这有帮助

Answer 3

我认为这就是你想要的。

http://jsfiddle.net/LtsJ4/5/

这些是我所做的改变

在所有四个div上制作了position样式元素absolute
在您的javascript代码中将document更改为'body'
将"px"添加到您的css电话中。

将Div关系定位到身体 - 在父母Div之外

HTML

CSS

的jQuery

解决方案

3 个答案: