Question

我意识到这个问题已被多次询问，但所有时间都与我的问题无关。当我重新调整浏览器大小时，我在屏幕上移动时使用'position：absolute'的所有元素，这意味着所有与我设计的浏览器不同的人都会看到这个。这是毁灭性的！我必须使用绝对定位，它允许我将图像堆叠在另一个图像的顶部，这在我的网站中是必不可少的。那么如何解决这个问题并使所有元素的行为相同呢？有没有办法强制浏览器为1366 x 768（我的浏览器大小），因为这是该网站看起来很好的大小？非常感谢你帮助我。

HTML和CSS

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Homepage</title>
<style type="text/css">
 /*<![CDATA[*/



<!-- 
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #cdcdff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
}


.twoColFixLtHdr #container {
width: 1024px;
background: #f2f2ff;
margin: 0 auto;
text-align: left;
height: 1050px;
} 

.twoColFixLtHdr #header {
background: #DDDDDD;
width: 1024px;
height: 200px;
} 

.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp {
margin-top: 3%;
visibility: visible;
z-index: 10000;
text-decoration: none;
color: #000;
}

.twoColFixLtHdr #container #sidebar1 #ptext {
font-family: Calibri;
font-size: 12px;
width: 80%;
line-height: 125%;
margin-left: 8%;
margin-top: 2%;
}

.twoColFixLtHdr #container #mainContent #secondarytext #second-pic {
width: 115px;
height: 170px;
margin-left: 6%;
}

.twoColFixLtHdr #container #header #home1 {
width: 110px;
height: 30px;
position: absolute;
top: 170px;
right: 617px;
z-index: 200;
}

.twoColFixLtHdr #container #sidebar1 #serieshyp {
width: 100%;
height: 100%;
margin-top: 5%;
font-size: 12px;
font-family: Calibri;
color: #000;
text-transform: none;
text-decoration: none;
margin-left: 9%;
}

.twoColFixLtHdr #container #header #about1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 507px;
}

.twoColFixLtHdr #container #header #information1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 397px;
}

.twoColFixLtHdr #container #header #contact1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 287px;
}

.twoColFixLtHdr #container #header #usefullinks1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 177px;
}

.twoColFixLtHdr #sidebar1 {
float: left;
width: 25%;
background: #f2f2ff;
padding: 15px 10px 15px 20px;
}

.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp2 {
margin-top: 3%;
margin-bottom: 6%;
color: #000;
}

     #bolden    {
margin-top: 4%;
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
margin-left: 8%;
}

    h1 {
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
   }
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
}

.twoColFixLtHdr #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
position: absolute;
width: 1024px;
height: 100px;
top: 1020px;
}

.twoColFixLtHdr #container #mainContent #yourweddingcerelogo {
width: 650px;
height: 49px;
position: absolute;
top: 213px;
left: 503px;
}

.twoColFixLtHdr #container #mainContent #secondlogo {
height: 49px;
width: 650px;
margin-bottom: 4%;
position: absolute;
left: 503px;
top: 650px;
margin-top: 1%;
}

.twoColFixLtHdr #container #mainContent #band {
position: absolute;
width: 130px;
visibility: visible;
left: 27
.%;
top: 200px;
left: 400px;
height: 122
  ..5%;
height: 1050px;
}

.twoColFixLtHdr #container #mainContent #contenttext {
margin-left: 13.5%;
margin-top: 10%;
width: 80%;
}

.twoColFixLtHdr #footer p {
margin: 0; 
padding: 10px 0; 
}

.fltrt { 
float: right;
margin-left: 8px;
}

.fltlft {
float: left;
margin-right: 8px;
}

.twoColFixLtHdr #container #mainContent #secondarytext {
margin-left: 10%;
margin-top: 10%;
width: 60%;
}

.twoColFixLtHdr #container #mainContent #secondarytext #secondtext2 {
width: 170px;
position: absolute;
right: 43
.%;
font-family: Calibri;
font-weight: bold;
font-size: 14px;
right: 525px;
top: 722px;
}

  w      {
font-family: Calibri;
font-size: 16px;
font-style: italic;
line-height: 1.6;
font-weight: bold;
}

.twoColFixLtHdr #container #mainContent #secondarytext #2ndcoltext2 {
font-family: calibri;
font-size: 14px;
font-weight: bold;
position: absolute;
width: 14.2%;
right: 80%;
top: 87.7%;
}

.twoColFixLtHdr #container #mainContent #secondarytext #nekcoltxt {
position: absolute;
right: 200px;
width: 175px;
top: 720px;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
}

.twoColFixLtHdr #container #mainContent #secondarytext #nekcolmaintxt {
height: 140px;
width: 320px;
position: absolute;
left: 833px;
top: 820px;
}

.twoColFixLtHdr #container #mainContent #secondarytext #secondtext3 {
width: 280px;
margin-left: 3.5%;
margin-top: 0%;
height: 200px;
position: absolute;
right: 538px;
}

.twoColFixLtHdr #container #mainContent #secondarytext #nekcolpic {
position: absolute;
height: 95px;
width: 130px;
right: 385px;
clear: both;
top: 723px;
}

.twoColFixLtHdr #container #mainContent #contenttext c {
font-family: Calibri;
font-size: 14px;
font-style: italic;
font-weight: bold;
}

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

p {
font-family: Calibri;
font-size: 14px;
font-weight: 500;
}

--> 
/*]]>*/
</style><!--[if IE 5]>
<style type="text/css"> 

.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 

.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }

</style>
<![endif]-->
</head>

   <!-- Main Class Plan -->

  <body class="twoColFixLtHdr">

   <div id="container">

    <div id="header">

        <!--img containing necc header elements -->


        <img height="100%" src="BaseImages/MainHeader.png" width="100%" />


        <div id="home1">

        <!-- hyperlinks following -->

        <a href="HomePage.html">

        <img height="100%" src="BaseImages/1%20Home%20button.png" width="100%" />

        </a>

</div>

<div id="about1">

    <a href="AboutBriony.html">    

    <img height="100%"

    src="BaseImages/2%20about%20briony%20button.png"

    width="100%" />

    </a>

</div>

<div id="information1">

    <a href="Information.html">

    <img height="100%"

    src="BaseImages/3%20Information%20button.png"

    width="100%" />

    </a>

    </div>

<div id="contact1">

    <a href="ContactDetails.html">

    <img height="100%"

    src="BaseImages/4%20contact%20button.png"

    width="100%" />

    </a>

</div>

<div id="usefullinks1">

    <a href="UsefulLinks.html">    

  <img height="100%"

    src="BaseImages/usefullinks1.png"

    width="100%" />

    </a>

</div>

<!-- end hyperlinks -->

   </div>

    <!-- end #header -->

   <div id="sidebar1">

     <img height="30%"

    src="BaseImages/label%201%20ceremonies.png"

    width="100%" />

        <div id="serieshyp">

   <!--var of hyperlinks -->

            <div id="hyp">

                <a href="HomePage.html"

                style="text-decoration:none">

                Wedding Ceremonies

                </a>

     </div>

            <div id="hyp">

              <a href="SameSexWeddingCeremonies.html"

                style="text-decoration:none">

                Same-Sex Commitment Ceromonies

              </a>

    </div>

            <div id="hyp">

                <a href="RenewalofVows.html"

                style="text-decoration:none">

                Renewal of Vows

                </a>

   </div>

            <div id="hyp">

                <a href="CeremonyOptions.html"

                style="text-decoration:none">

                Ceremony Options

                </a>

  </div>

            <div id="hyp2">

                <a href="FrequentlyAskedQuestions.html"

                style="text-decoration:none">

                Frequently Asked Questions

                </a>

            <br />

          </div>

</div>

  <!-- hyp end-->

        <img height="30%"

        src="BaseImages/label%20extras%20and%20ideas.png"

        width="100%" />

<!--uniform label -->

<div id="bolden">

    Choosing the Right Celebrant

</div>

<div id="ptext">

    When choosing your Celebrant,  it’s not all about the money.
    it will help if you consider the personality you are looking for, not just the fee.
    Choosing a celebrant whose personal style fits in well with the type of ceremony you have in mind       is far more important than finding the cheapest price.
    The right celebrant can have a hugely positive impact on your wedding
    and help make your day go smoothly and happily.  

</div>

<div id="bolden">

    Poetry

</div>

<div id="ptext">

    I have a wide variety of poetry and readings for you to choose from
    or you can use special verses which have special meaning to you both.
    These can be seamlessly included in your marriage ceremony and often
    are a real highlight.
    You might like to consider having friends and family members
    read one or two poems for you on the day, or I can do it for you.
    It’s completely up to you.

        <br />
        <br />
        <br />  <!--find sub for br breaks -->
        <br />
        <br />
        <br />

</div>

<!-- end #sidebar1 -->

</div>

<div id="mainContent">

    <div id="yourweddingcerelogo">

        <img height="100%"

        src="BaseImages/page%201%20label%20your%20wedding%20ceremony.png"

        width="100%" />

    </div>

    <div id="band">

    <!-- change according to page -->

    <img height="100%"

    src="BaseImages/ElongatedFlower3.png"

    width="100%" />

    </div>

    <div id="contenttext">

          <h1>

           A Ceremony Designed Especially for You

          </h1>

           <p>

           I believe that you should have exactly what you want on your special day.

           </p>

            <c>

            I understand how much time and effort goes into planning your dream wedding,
            so I workwith you to ensure your special day is exactly how you want it.
            It means the world to me to help you find the perfect verse,
            write the most meaningful vows and put together
            a service you will remember for the rest of your lives.

            <br />

            </c>

            <p>

            You’re certain to have wonderful ideas and plans for how you would
            like your wedding to be, from the cake and flowers, to the head-dresses
            for the flower girls, everything has to be considered and plans put
            into action to make it work. The Marriage Ceremony should also be considered
            as a crucial element in your special day and it too needs
            advance planning so that it goes exactly how you want it.

            <br />

            <br />

            Together, we can design a ceremony that fits the style of your wedding
            and is all about the two of you.  It can be as long or short as you want it.
            You can choose the content. Whether modern or traditional, your wedding ceremony
            should be as unique as you are and together
            we can make one that works perfectly for you both.

            <br />

            <br />

            There are requirements that are integral to the solemnisation
            and registration of a marriage and I will ensure that the process
            runs smoothly and nothing is overlooked. I’m happy to
            explain all of the requirements more fully at our first meeting.

  </div>

            <div id="secondlogo">

                <!-- change according to page -->

                    <img height="100%"
                                                  src="BaseImages/label%20wedding%20client%20testimonials.png"

                    width="100%" />

            </div>

        <div id="secondarytext">

            <!-- change according to page -->

            <div id="second-pic">

              <img height="100%"

                 src="BaseImages/testimonial%20pic%201.png" 

                 width="100%" />

            </div>

        <div id="secondtext2">

            <w>

            Thank you so much for making our day so special.
            The ceremony you planned for us was perfect! 
            It fit in with our theme and reflected our individuality perfectly.

            </w> 

        </div>

        <div id="nekcolpic">

            <img src="BaseImages/testimonial pic 2.png"

            alt=""

            width="100%"

            height="100%" />

        </div>

        <div id="nekcoltxt">

            <w>

            Hi Briony,
            We can’t thank you enough for the time and
            attention to detail you put into our wedding.

            </w>

        </div>

        <div id="nekcolmaintxt">

            <w>

            Your professionalism was outstanding and helped make our wedding day
            run smoothly with everything going off without a hitch.
            Thank you for all the different options you gave us.
            We ended up with exactly the service we wanted,
            even though at the start we had no idea what that was!

            </w>

        </div>

        <div id="secondtext3">

                <w>

                Thanks for all your time and patience and being there
                for us all the way through the process.
                It would not have been the same glorious wedding without you.



                </w>

        </div>

        </div>

        <!-- end #mainContent -->

    </div>

        <br class="clearfloat" />

        <div id="footer">

            <img height="100%"

            src="BaseImages/footer.png"

            width="100%" /> 

        <!-- end #footer -->

        </div>

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

Answer 1

使用position: absolute定位的元素相对于position: relative层次结构中的下一个元素定位，如果没有，则定位在屏幕上（不是）。对当前代码的简单修复是将position: relative添加到主容器元素：

#container {
position: relative;
}

这不会让您的网站完全正常工作，但它会阻止一切移动。我怀疑你做完这些后你需要重新定位你的元素，但这可能就是你所需要的。

总的来说，这些天你不应该为固定的浏览器大小进行设计。这是一个简单的事实，人们没有相同大小的屏幕，并且有很多人从移动设备访问网站。如果您不准备让您的网站使用多种分辨率，那么我建议从某种类型的框架开始，例如Bootstrap，这将允许您选择其网格元素以实现所需的布局，而无需需要付出很多努力才能使网站适用于其他解决方案。

当我重新调整浏览器大小时，元素会自行处理

1 个答案: