绝对居中Div叠加

时间:2011-08-28 16:31:46

标签: html overlay z-index center absolute

这是我第二次尝试修复此问题!我在Stobor的帮助下解决了第一个问题,现在这第二个问题似乎有点棘手,但它不能那么难吗?

正如你在这里看到的http://dekkro.no-ip.org/我有一个完全居中的图像,还有一个带登录框的样式div。

我想要实现的是登录框,始终是该图像的100%死角。它以我为中心,但对于很多分辨率较小的人来说,它不是。

问题在于:http://dekkro.no-ip.org/problem.png

有没有办法解决这个问题?我的代码有点乱,但可以理解。我从早上5点开始尝试这样做,现在是下午5点!在这里苦苦挣扎! 谢谢!

1 个答案:

答案 0 :(得分:1)

这里你去...在firefox,ie9,chrome和opera中测试过。希望这可以解决问题,或者给你一个开始。

screenshot

<html>
<head>
    <style type='text/css'>
    html, body{
        margin: 0px; /* some browsers add a margin at the top, get rid of it to have proper positioning */
    }
    body{
        background-image: url('blahbg.png');
    }
    .Centered{
        margin-right: auto;
        margin-left: auto;
        align: center;
    }
    .LayoutContainer{
        background-image: url('blink.gif');
        background-position: bottom left;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }
    .BodyContainer{
        background-image: url('testimage.png');
        background-repeat: no-repeat;
        margin-top: 50px; /* to bring the layout-body down a bit you want this */
        height: 425px;
        width: 690px;
    }
    .MiddleContainer{
        text-align: center;
        padding-top: 20px;
        width: 200px;
    }
    .LoginContainer{
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin-top: 20px;
        height: 230px;
    }
    .InfoContainer{
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin-top: 20px;
        height: 30px;
    }
    </style>
</head>
<body>

<div class='LayoutContainer'>
    <div class='BodyContainer Centered'>
        <div class='MiddleContainer Centered'>
            <div class='LoginContainer'><img src='logo.png' /></div> 
            <div class='InfoContainer'></div>
        </div>
    </div>
</div>

<body>
</html>