Question

好的，所以我用一个外部CSS制作了一个简单的网页，现在它在我的电脑上显得很好但是当我把它发送给我的朋友时，底部按钮不在一起？

HTML代码

    <body>

<style type="text/css">
body {
    overflow:hidden;     <!-- Setting body overflow to hidden -->
}

<!-- Background image -->



    </style>

    <div id="backgroundWrapper">
        <img src="background.png" />      
    </div>

    <!-- Home button -->   

    <div id="homebtn">
        <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>   
        </a>
    </div>

    <!-- Shop Button -->

    <div id="shopbtn">
        <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>  
        </a>
    </div>
    </body>

CSS代码

 #backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;}
     #backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
     #homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;}
     #shopbtn  {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;}
     #text {
     color:black;
     font-size:15;
     text-align:center;
     position:relative;
     top:20%;
     font-family:verdana;
     font-weight:bold;
     }
     #myform {
    position:absolute;
     left:10%;
     top:30%;

     }


      #submitbuttons {
    position:relative;
    text-align:center;
     top:80%;

     }




    body {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px
    }

Answer 1

您正在使用position: absolute;，因此您需要将子元素包装在position: relative;容器中，以便它们不会在野外流出

例如

<div class="container">
   <div class="firstbtn"></div>
   <div class="secondbtn"></div>
</div>

<style>
   .container {
     position: relative;
     height: 200px;
     width: 500px;
   }

   .firstbtn {
     position: absolute;
       left: /* whatever */;
       top: /* whatever */;
   }

   .secondbtn{
     position: absolute;
       left: /* whatever */;
       top: /* whatever */;
   }
</style>

所以现在两个按钮都不会流出容器元素

Answer 2

将此css更改为

#backgroundWrapper{width:100%; z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#button-wrapper{width:30%; margin:0 auto;top:90%;z-index:1;}
#homebtn {position:relative;top:90%;float:left;}
#shopbtn  {float:right;}

#button-wrapper相应地调整宽度创建button-wrapper并将两个btns放入html

CSS图像在不同分辨率上的不同位置？

2 个答案: