php - 两个相互影响的div的CSS

Question

我正在更新一个不是我制作的 Wordpress 网页，我也不懂 PHP。我无法将 float 图像添加到空白页脚上方的页面底部。它应该看起来像在顶部:

CSS:

#uway-container {
    margin: 0px 0 0 0;
    overflow: visible;
    background: url(images/background-top.png) no-repeat 0 0;
    min-height: 250px;
    position:relative;
    z-index: 100;
}

我还有底部显示:

#test {
    background-image: url('images/combinedFooter.png');
    background-repeat: no-repeat;
    margin: 0px 0px 0px 0px;
    color: #000;
        overflow: visible;
    min-height: 300px;
    position:relative;
    z-index: 100;
}

当我添加第二个代码/图像时，它会在顶部创建这个额外的空间:

当我尝试减少中间内容的空间时，它会将底部向上移动:

这是 footer.php:

<?php
/**
 * Footer Template
 *
 * The footer template is generally used on every page of your site. Nearly all other
 * templates call it somewhere near the bottom of the file. It is used mostly as a closing
 * wrapper, which is opened with the header.php file. It also executes key functions needed
 * by the theme, child themes, and plugins. 
 *
 * @package Hybrid
 * @subpackage Template
 */
?>
        <?php do_atomic( 'after_container' ); // hybrid_after_container ?>

    </div><!-- #container -->
<!--     </div> id="homepage-container"> -->

 </div> <!--id="uway-container"> -->
    <div id="spacer"></div>
    <div id="footer-container">
    <div id="test"></div>
        <?php do_atomic( 'before_footer' ); // hybrid_before_footer ?>

        <div id="footer">

            <?php do_atomic( 'footer' ); // hybrid_footer ?>

        </div><!-- #footer -->

        <?php do_atomic( 'after_footer' ); // hybrid_after_footer ?>
    </div><!-- #footer-container -->

</div><!-- #body-container -->

<?php do_atomic( 'after_html' ); // hybrid_after_html ?>
<?php wp_footer(); // wp_footer ?>

</body>
</html>

如果有帮助，这里是完整的 CSS:

/* Get base CSS */
@import url('../hybrid/library/css/21px.css');

/* Get layout CSS */
@import url('../hybrid/library/css/2c-l-fixed.css');

/* Get plugins CSS */
@import url('../hybrid/library/css/plugins.css');

/* Get drop-downs CSS */
@import url('../hybrid/library/css/drop-downs.css');

/* Get default CSS */
@import url('../hybrid/library/css/screen.css');

body {
    background:#000
}

h2 {
    font-family: "Myriad Pro", arial;
}

.widget a {
    color:#ffffff;
    text-decoration: none;
    font-family: "Myriad Pro", arial;
    font-size: 100%;
}

.widget a:hover {
    color:#0fffff;
}

/* header stuff */
#site-title {
    float: right;
    width: 440px;
    height: 80px;
    margin-top: 10px;
/*  padding-right: 10px; */
    }
#site-title a {
    display: block;
    width: 440px;
    height: 80px;
    background: url(images/CampaignLogo.png) no-repeat 0 0;
    text-indent: -9999em;
    margin-top: 10px;
/*  padding-right: 10px; */
    }

#site-description {
    text-indent: -9999em;
    height: 0px;
}


/* navigation info */
#primary-menu, #navigation {
    position: absolute;
    top: 28px;
    padding-left: 10px;
    margin:0 0 40px 0;
    font-size: 1em;
    z-index: 1000;
    font-family: "Myriad Pro", arial;
}

#primary-menu li, #page-nav li {
    margin-left:0px;
}
#primary-menu li li, #page-nav li li {
    margin-right:0
}
#primary-menu li a, #page-nav li a {
    padding:8px 6px 8px 6px;
    color:#cfcccc;
    background:#000;
    background: url(images/MenuSlice.png) repeat-x;
    border:1px solid #ccc;
    border: none;
    width: 165px;
}
#primary-menu li:hover a, #primary-menu li.sfHover a, #page-nav li:hover a, #page-nav li.sfHover a {
    background: url(images/MenuSlice.png) repeat-x;
    color:#111;
    color:#cfcccc;
    border:1px solid #ccc;
}

/* main body */
#body-container {
    margin: 0 auto;
    width: 1024px;
}

/* homepage large images info */
#homepage-container {
    margin: 0px 0 10px 0;
    overflow: visible;
    position: relative;
/*  background: url(images/Home3-BG.jpg) no-repeat 0 0; */
    min-height: 773px;
}

/* site background info */
#uway-container {
    margin: 10px 0 0 0;
    overflow: visible;
    background: url(images/background-top.png) no-repeat 0 0;
    min-height: 250px;
    position:relative;
    z-index: 100;
}

#container {
    margin: -90px 0 0 25px;
    width: 980px;
    background: rgb(227,221,221);
    border-radius: 10px;
    position: relative;
    z-index: 50;
}


/* footer stuff*/
.widget {
    color:#0fffff;
    font-size: 15px;
}

#subsidiary h3 {
    margin: 0 0 5px;
    font-size: 15px;
}
#subsidiary .widget-title {
    color: #0fffff;
}

#subsidiary .widget {
    width: 315px;
    margin:0 5px 0 20px;
}

#right-link {
    padding-left: 110px;
}

#left-link {
    padding-left: 50px;
}

#subsidiary {
    margin: 90px 0 0px 0;
}

#test {
    background-image: url('images/combinedFooter.png');
    background-repeat: no-repeat;
        overflow: visible;
    min-height: 300px;
    position:relative;
    z-index: 100;
}

#footer-container {
    margin: -5px 0px 0px 0px;
    color: #000;
}


#footer .copyright {

    margin: 0 0 0 20px; 
    float: none;
    text-align: center;
    display: block;
}


#header-container {
    width: 1020px;
    height: 110px;
}

#menu-container {
    width: 980px;
}

.entry-content {
    margin: 0px 10px 0 28px;
    width: 920px;
}

.entry-content h2 {
    margin: 0px 10px 10px 300px;
    font-size: 2.5em;
    line-height: 2em;
    width: 920px;
    color: #fdba45;
}

.entry-content h2#LessIndent {
    margin: 0px 10px 10px 200px;
}

#content {
    margin: 0px;
    width: 980px;
    background-image: url('images/ContentText.png');
    background-repeat: repeat-y;
    margin-top: 47px;
}

#content-wrapper {
    background-image: url('images/ContentTop.png');
    background-repeat: no-repeat;
    min-height: 47px;
}

.page {
    background: url('images/ContentBottomLarge.png') bottom left no-repeat;
    min-height: 87px;
    z-index: 501;
}

#primary {
    margin-top: 10px;
}

.entry-title a {
    margin-left: 28px;
}

ul { 
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}


/* header sections on coordinator resource page */
.Coord {
    font-family: "Myriad Pro", arial;
    color: #00529b;
    font-size: 1.1em;
}

/* bullets for lists within content pages */
#content li {
    background: url('images/BlueButton.png') left center no-repeat;
    padding-left: 30px; 
}

li.BlueButton {
    margin-bottom: 15px;
}

li.BlueButton2 {
    margin-bottom: 5px;
}

/* social icons */

#SocialIcons {
    margin-top: 10px;
}

#SocialIcons a {
    display: inline-block;  
    width:40px;
    height:40px;
    background-repeat:no-repeat;
    background-position:0 0;
}

#FacebookIcon {
    background-image:url('images/Facebook.png');
    margin-left: 440px;
}

#TwitterIcon {
    background-image:url('images/Twitter.png');
    margin-left: 20px;
}

Answer 1

你有一个 #homepage-container div 与 position:relative已经，所以只需在结束前添加您的图像 </div> #homepage-container 的标签并将其绝对定位 [ bottom:0 ].

这会将它固定到 #homepage-container 的底部.

所以你的标记看起来像这样:

    <!-- You existing code -->
<div id="homepage-container">
    <div id="uway-container"></div>
    <div id="container"></div>

    <!-- This is the new element! (Positioned at the bottom!) -->
    <!-- Position is `absolute` to the `#homepage-container` and move it 15px down (so its flush with the bottom) -->
    <div id="static-footer-image" style="position:absolute; bottom: -15px;">
        <img src="http://placehold.it/850x150"/>
    </div>

 </div>

所以基本上，您已经有了 #homepage-container作为relative ，因此将您的图像绝对定位到 bottom:-15px; 中的图像(同时添加 position:absolute 属性!)。

您可以复制并粘贴 div#static-footer-image div 到您的代码中，它应该位于图像的顶部，沿着底部。