Question

enter image description here

我遇到了重叠两个盒子的问题。我应该使用绝对定位吗？ z-index还是有什么技术？顺便说一句，我希望它们重叠只是我想确保它适用于跨现代浏览器。 IE8或+

我不能把黑匣子推到中心为什么？ enter image description here

<!DOCTYPE HTML>
<html>

<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>

<body>

        <div id="masthead">

            <div id="logo">
                Logo here
            </div><!--end logo-->

            <div id="header">
                <div id="horizontalMainMenu">
                    <ul>
                        <li><a href="#">About Us     |</a></li>
                        <li><a href="#">Contact Us   |</a></li>
                        <li><a href="#">Metro Link   |</a></li>
                        <li><a href="#">WaRMSS Login  </a></li>
                    </ul>
                    <br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
                </div>
            </div>
            <!--end header-->

        </div><!--end masthead-->

        <div id="container">
            <div id="left_col">
                <div id="verticalMainMenu">
                    <ul>
                        <li><a href="#">Air Quality Control</a></li>
                        <li><a href="#">CalATERS</a></li>
                        <li><a href="#">Email Encryption</a></li>
                        <li><a href="#">Employee Guide</a></li>
                        <li><a href="#">Patient Special Function Requests</a></li>
                        <li><a href="#">Request Home Address <br> Confidentiality Form</a></li>
                        <li><a href="#">Travel Store</a></li>

                    </ul>
                </div><!--verticalMainMenu ends here-->
            </div><!--left_col ends here-->

            <div id="page_content">
                <div id="horizontalBodyMenu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Clinical</a></li>
                        <li><a href="#">Administrative</a></li>
                        <li><a href="#">Service</a></li>
                        <li><a href="#">Search</a></li>

                    </ul>
                    <br style="clear:left">
                </div>


            </div><!--page_content ends here-->
        </div>

        <div id="footer">
            Footer
        </div><!--end footer-->

</body>

</html>

CSS：

/* CSS layout */
*{
    padding:0;
    margin:0;
}
body {
    margin: 0;
    padding: 0;
}

#masthead {
    min-width: 600px;
}

#logo {
    float: left;
    width: 200px;
    background-color:yellow;/*I dont know what color this is in the template*/

}

#header {
        background-color:yellow;/*I dont know what color this is in the template*/
        height:300px;
}

#container {
    clear: both;
    min-width: 600px;

}

#left_col {
    float: left;
    width: 200px;
    background-color:red; /*I dont know what color this is in the template*/

}

#page_content {
    background-color:black; 
    margin:-50px 0 0 0;
    width:95%;
}

#footer {
    clear: both;
}
/* CSS common layout ends here*/

/* horizontalMainMenu starts here*/
#horizontalMainMenu{
    width:100%;
    background-color:transparent;
}
#horizontalMainMenu ul{
    margin:0;
    padding:0;
    float:left;
}
#horizontalMainMenu ul li{
    display:inline;
}
#horizontalMainMenu ul li a{
    float:left;
    text-decoration:none;
    color:white;
    padding:5px 9px;
}

/*horizontalMainMenu ends here*/

/*Body Menu Starts here*/

#horizontalBodyMenu ul{
    list-style:none;
}

#horizontalBodyMenu ul li{
    display:inline;
    }


/* horizontalBodyMenu ends here*/

#horizontalMainMenu ul li a:visited{
    color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
    color:#fff;
    background-color:#0b75b2;
}

#verticalMainMenu ul{
    margin:0;
    padding:0;
    list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
    padding:0 0 0 10px;
    background-image:url('');
    background-repeat:no-repeat;
    background-position:.5em;
    line-height:200%;
}
#verticalMainMenu li a:hover{
    color:#fff;
    background-color:#0b75b2;

}

Answer 1

你应该正常地做，然后用margin-top: -80px向上拉“方框2”。

这适用于“所有浏览器”。

这是一篇关于负利润率的好文章：

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 2

你需要相对于box1定位box2。查找html相对定位。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

重叠的盒子

2 个答案: