html / css有缩放问题

时间:2014-01-06 14:13:46

标签: html css zooming

请不要评判我,我只是盯着开发网站,这是我的第一个。 这是我的网站,无论我设置什么位置,我都不能让形式或图像留在那里。当使用静态位置时,我不能将一个图像放在另一个上。那我该怎么办?

<style type="text/css">
.position
{
position:Relative;
top:-40px;
left: 5px;
width:13%;
height:13%;
}
.WidthFull
{
position: static;
z-index: 0;
width: 99.4%;
}
.FormPosition
{
position: Relative;
top:-80px;
right:-1070px;

}

</style>
</head>
<body>
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position" src="img/Letters%20connic.png" />
<div class=FormPosition>
    <form id="login" method="post" action="index.php">
<input type="text" placeholder="Your Email" name="email" autofocus/>                                                     
                    <input type="text" placeholder="Password" name="email" autofocus />

        <button type="submit" style="width: 5%; height: 25px; border: 0;background: #209cf8; border-radius:5px"><font size="3.0";><b>Login</b></font>

                    </button>
        <span></span>
    </form>
 </div>



 </body>
 </html>

1 个答案:

答案 0 :(得分:0)

像这样使用 外侧div属性将是相对的,而内部image / div属性将是绝对的 你想要出现哪一方

<style type="text/css">
.position-relative{
    position:relative;
}
.position-absolute{
    position:absolute;
    top:10px;
    left:10px;  

的z-index:10;         }

</style>
</head>
<body>
<div class="position-relative">
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position-absolute" src="img/Letters%20connic.png" />
</div>

 </body>
 </html>