我知道有很多关于这个主题的讨论，我已经阅读了很多并且厌倦了许多事情。本教程对我的其他一些页面非常有帮助http://alistapart.com/article/css-positioning-101。但是这个让我失望。 我正在尝试将#mainwrapper置于中心位置并位于#bubble div的顶部。我通过使用top：200px等指定位置来实现此目的。但是当调整窗口大小时，一切都会移动。我已经使用相对定位按位置修正了其他页面上的问题。当我在这个页面上尝试它时，它会隐藏#bubble背后的#mainwrapper。 真的卡住了！
<div id="bubble">
<div class="content">
<div class ="nav_image">
<img src="../navbar/backbar.gif" height="114"/><br />
<nav>
<ul>
<li class='active'><a href="../homepage.htm"class="nav1">Home</a></li>
<li class='has-sub'><a href="cottages.htm"class="nav1">Cottages</a>
<ul>
<li class="has-sub"><a href="farmhouse/farmhouse.htm"class="nav1">Farmhouse</a>
<ul>
<li><a href="farmhouse/facilities.htm"class="nav1">Facilities</a></li>
<li><a href="farmhouse/guest book.htm"class="nav1">Guest Book</a></li>
<li><a href="farmhouse/booking rates.htm"class="nav1">Booking Rates</a></li>
</ul>
</li>
<li class="has-sub"><a href="the barn/the barn.htm"class="nav1">The Barn</a>
<ul>
<li><a href="the barn/facilities.htm"class="nav1">Facilities</a></li>
<li><a href="the barn/guest book.htm"class="nav1">Guest Book</a></li>
<li><a href="the barn/booking rates.htm"class="nav1">Booking Rates</a></li>
</ul>
</li>
<li class="has-sub"><a href="granary/granary.htm"class="nav1">Granary</a>
<ul>
<li><a href="granary/facilities.htm"class="nav1">Facilities</a></li>
<li><a href="granary/guest book.htm"class="nav1">Guest Book</a></li>
<li><a href="granary/booking rates.htm"class="nav1">Booking Rates</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="../croyde.htm"class="nav1">Croyde</a></li>
<li><a href="../contactus.htm"class="nav1">Contact us</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div id="mainwrapper">
<div id="box-1" class="box">
<a href="farmhouse/farmhouse.htm"><img id="image-1" src="030.jpg"/></a>
<span class="caption simple-caption">
<a href="farmhouse/farmhouse.htm" class="span">The Farmhouse</a>
</span>
</div>
<div id="box-2" class="box">
<a href="the barn/the barn.htm"><img id="image-2" src="040.jpg"/></a>
<span class="caption simple-caption">
<a href="the barn/the barn.htm" class ="span">The Barn</a>
</span>
</div>
<div id="box-3" class="box">
<a href="granary/granary.htm"><img id="image-3" src="038.jpg"/></a>
<span class="caption simple-caption">
<a href="granary/granary.htm" class="span">The Granary</a>
</span>
</div>
</div>
<div id="bubble2">
<div class="blurb">
<img src="../titles/the cottages (Copy).jpg" alt="The Cottages">
<p>The properties are idyllically situated right in the heart of the picturesque Devon coastal village of Croyde, which has history that stretches over a thousand years to pre-saxon times.</p>
<p>The Farmhouse & Barn are 17th century Grade II listed and both sleep 6. The Granary is Curtelage listed and sleeps 2. All of the cottages can be rented togther or seperatly as required. The Barn and Farmhouse are ideal for big parties with an interconnecting door which we can arrange to be unlocked.</p>
<p>The cottages are located centrally in the village, down a small quiet lane just 5 minutes walk to the pubs and eateries and 10 minutes walk to the beautiful sandy beach.</p>
</div>
</div>
</body>
</html>
CSS：
@charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
color: #000;
}
#bubble {
width: 1013px;
height: 800px;
left: 6px;
margin: 0 auto;
background-image: url('../images/sea board (Copy).jpg');
background-repeat: no-repeat;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
#mainwrapper {
position: relative;
top: 32px;
width: 740px;
background: transparant;
padding: 20px 50px 20px 50px;
min-height: 250px;
height: auto;
}
#mainwrapper .box {
position: relative;
border: 3px solid white;
cursor: pointer;
height: 225px;
float: left;
overflow: hidden;
width: 225px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#bubble2{
position: relative;
width: 980px;
height: 300px;
margin: 0 auto;
background:white;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
#mainwrapper .box img {
position: relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .simple-caption {
height: 70px;
width: 225px;
display: block;
bottom: -80px;
line-height: 15pt;
text-align: center;
}
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#mainwrapper .span {
text-decoration: none;
color: white;
font-weight: bold;
}
h1{
font-size: 100%;
font-weight: bold;
padding-right: 15px;
padding-left: 15px;
}
h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #33CCFF;
text-decoration: none;
font-size: medium;
font-weight: normal;
}
a:visited {
color: #0033CC;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
.content {
padding: 10px 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
任何帮助都会很糟糕！ 感谢
答案 0 :(得分：0)
添加保证金：0自动;像这样？
#mainwrapper {
position: relative;
top: 32px;
width: 740px;
background: transparant;
padding: 20px 50px 20px 50px;
min-height: 250px;
height: auto;
margin:0 auto;
}
这会解决你的问题吗？如果你遇到绝对落后于其他对象的问题，z-index通常会非常有用。
上述解决方案的笔在这里 http://codepen.io/dave_agilepixel/pen/bgjlv