html - Div 不断移动位置？

Question

我的标题应该是这样的。

但每隔一小时左右它就会恢复到这个状态。

我将其设置为在主图像后面有两个 div，这样无论用户的浏览器有多宽，它们都可以重复。

问题是无论我是否正在处理布局，图像都会改变位置(它们向上或向下移动)。我不知道是什么导致它经常发生变化，但这让我抓狂!!

该网站是 www.rheanna.net(抱歉，我现在不能发布超过 2 个链接)，以防您需要查看我在这里忘记提供的任何内容。

适用的 header HTML 如下所示:

<div id="top1"></div><div id="top2"></div>
<div class="container">
<div id="logo-area">

我的 CSS 看起来像这样:

#top1 {
    width:49%;
    position:absolute;
    top:91px;
    left:0;
    height:127px;
    background:url("http://rheanna.net/images/topLeft_bg.gif") repeat-x;
    z-index:-10;
    }
#top2 {
    width: 49%;
    position: absolute;
    top: 91px;
    right: 0;
    height: 141px;
    background: url("http://rheanna.net/images/topRight_bg.gif") repeat-x;
    z-index: -10;
}
.container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
.container #logo-area { text-align: center; margin-bottom: 57px; }

如果有人知道为什么它会改变对我的立场，我将非常感谢您的意见!!谢谢!

Answer 1

When you are setting elements have the position property of absolute and you try to align the with other elements you should wrap them in another element such as a div or section tag and give it the position over relative.

您当前的代码似乎有点乱，因此我重新编写了您想要的设计元素。您的 Logo 区域将需要移出其当前容器，并在页眉之后单独放置。

CSS

.LogoArea {
    position: relative;
    clear: both;
    display: block;
    width: 100%;
    min-width: 960px;
    margin-top: -60px;
    /* margin-bottom: 60px; */
    box-shadow: 0 0 7px rgba(0,0,0,0.05);
}
.LogoArea>.LeftStripe,
.LogoArea>.RightStripe {
    width: 49%!important;
    position: absolute;
    z-index: -10;
}
.LogoArea>.LeftStripe {
    background: url("/images/topLeft_bg.gif") repeat-x;
    background-position: 0 -72px;
    height: 35px!important;
    top: 72px;
}
.LogoArea>.RightStripe {
    background: url("/images/topRight_bg.gif") repeat-x;
    right: 0;
    height: 21px;
    background-position: 0 -120px;
    top: 120px;
}
.LogoArea>.Logo {
    background: url("/wp-content/uploads/2016/05/logo.jpg");
    width: 781px;
    height: 245px;
    margin: 0 auto;
}
.LogoArea>.DonateLink {
    width: 21px;
    overflow: hidden;
    left: 50%;
    margin-left: calc(-364px/2);
    position: absolute;
    top: 74px;
    opacity: 0;
    height: 27px;
}

HTML

<div class="LogoArea">
    <div class="LeftStripe"></div>
    <div class="RightStripe"></div>
    <div class="Logo"></div>
    <a href="YOUR DONATION LINK HERE" title="Donate using PayPal" class="DonateLink">Donate</a>
</div>

HTML 部分应该放在你的头文件的底部。之前<!-- end #main-header -->因为您的 Logo 构成了页眉的一部分。

我希望这个改进的答案更有意义并且整体效果更好。

I have also provided additional mobile support

移动 CSS

@media (max-width: 960px) {
    .LogoArea {min-width:initial;}
    .LogoArea>.RightStripe,
    .LogoArea>.LeftStripe {display:none;}
    .LogoArea>.Logo {width: 100%;background-size:cover;height: 215px;}
    .container, .page #left-area, .single-post #left-area {width:100%;margin:0;}
    .LogoArea>.DonateLink {display: none;}
}
@media (max-width: 701px) {
    .LogoArea>.Logo {height: 190px}
}
@media (max-width: 625px) {
    .LogoArea>.Logo {height: 170px}
}

@media (max-width: 550px) {
    .LogoArea>.Logo {height: 145px}
}

@media (max-width: 459px) {
    .LogoArea>.Logo {height: 120px}
}

@media (max-width: 439px) {
    .LogoArea>.Logo {BACKGROUND-IMAGE: NONE;height: auto;}
    .LogoArea>.Logo:before {
   CONTENT:"RHEANNA DOT NET";
   font-size: 14px;
   DISPLAY:BLOCK;
   text-align:center;
   padding: 1em;
   font-family: cursive, sans-serif;
   color: #8BC34A;
   }.LogoArea>.Logo:after {
   CONTENT:"A collection of life, love and memories.";
   font-size: .35em;
   DISPLAY:BLOCK;
   text-align:center;
   padding: 1em;
   padding-top:0;
   color: #607D8B;
   margin-top: -10px;
   margin-bottom: 0px;
   padding-bottom: 2em;
   }
}