绝对定位的孩子中相对定位的孩子......（帮助）

Question

好吧，我现在正在努力完全理解所有定位代码的工作原理，并在我的网站上做出一切响应。我遇到的每一个错误我都能通过在线研究和不断凝视（lol）来解决自己。但是，我遇到了一个相当恼人的问题......

问题 - 我有一个相对定位的div（id：news_content），并且位于绝对定位的div内（id：page）。当我尝试使用顶部和左侧的定位命令移动news_content时，左边是唯一正在做出反应的人。虽然top命令根本没有移动news_content。

/*Global*/
body {
    margin:0;
    padding:0;
}
div {
    margin:0;
    padding:0;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
table {
    margin:0;
    padding:0;
    border-spacing:0;
}

/*Global Divs*/
#page {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#nav_main {
    background-color:black;
    width:100%;
    height:14%;
    position:fixed;
    z-index:0;
}



/*Navigation*/
#nav_content {
    background-color:gray;
    width:12.5%;
    height:86%;
    position:fixed;
    top:14%;
    z-index:-1;
    }
    #nav_side_container {
        background-color:black;
        width:60%;
        height:93%;
        position:relative;
        top:3.5%;
        left:18.75%;
        }
    #nav_side {
        background-color:red;
        width:75%;
        height:93%;
        position:relative;
        top:3.5%;
        left:12.75%;
        }
        #nav_side table {
            width:100%;
            height:100%;
            font-family:'Playball';
            font-size:1.25em;
            font-weight:bold;
            text-align:center;
            }
            #nav_side table td {
                width:100%;
                height:33.33%;
                border-top:0.1em solid black;
                }

/*News*/
#news_content {
    background-color:red;
    width:87.5%;
    height:86%;
    position:relative;
    top:14%;
    left:12.5%;
    z-index:-2;
    }
/*
#news {
    background-color:black;
    width:10em;
    height:10em;
    position:relative;
    left:10em;
}
#news_main {
    background-color:blue;
    width:10em;
    height:10em;
    position:relative;
}
#news_side {
    background-color:green;
    width:10em;
    height:10em;
    position:relative;
}

/*Articles*/
#articles_content {
    background-color:blue;
    width:87.5%;
    height:86%;
    position:relative;
    left:12.5%;
    z-index:-2;
    }

/*Future Plans*/
#future_content {
    background-color:green;
    width:87.5%;
    height:86%;
    position:relative;
    left:12.5%;
    z-index:-2;
    }

<div id="page">
    	<div id="nav_main">
        </div>
        
        <div id="nav_content">
            <div id="nav_side_container">
                <div id="nav_side">
                    <table>
                        <tr>
                            <td>News</td>
                        </tr>
                        <tr>
                            <td>Articles</td>
                        </tr>
                        <tr>
                            <td>Future<br>Plans</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div id="news_content">
            <div id="news">
            </div>
            <div id="news_main">
            </div>
            <div id="news_side">
            </div>
        </div>
        
        <div id="articles_content">
        </div>
        
        <div id="future_content">
        </div>
    </div>

...

- 不知道问题是真实的......我可能知道相对和绝对定位是如何错误的，或者我的代码完全是错误的。

Answer 1

这是因为您的#page ID并没有高度。如果你给它height: 100%;，那应该这样做。