две плашки. изменить порядок наложения

cyklop77 · October 3, 2011

помогите пожалуйста на этой страничке поместить плашку с крестом под плашку формы

george75 · October 3, 2011

Вынести

за пределы <div class="authorization_inner"> и спозиционировать относительно <div class="MPauthorization" id="MPauthorization">

<!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" lang="eng" xml:lang="eng">
	<head>
		<style>
body{
	background-color: red;
}		

.MPauthorization{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(images/bg_auth_reg.png) center top repeat;
    z-index: 100;
    /*opacity: 0.7;*/

    position: fixed;
}

    .MPauthorization .auth_rule{
		width:100%;
		height:50%;
    }

    .MPauthorization .authorization_inner{
        width: 705px;
        height: 504px;
        background: url(images/bg_auth_reg_blank.png) center top no-repeat;
        margin:  0 auto;
        margin-top: -252px;
        position: relative;
        z-index: 200;
    }

        .MPauthorization .authorization_inner .auth_form{
            width: 668px;
            margin:  0 auto;
            padding-top: 100px;
            z-index: 200;
            position: relative;
        }

            .MPauthorization .authorization_inner .auth_form fieldset{
                border:  none;
                background: none;                
            }

                .MPauthorization .authorization_inner .auth_form .label{
                    font-family: Trebuchet MS, arial, sans-serif;
                    font-size: 24px;
                    color: #599A9E;
                    font-weight: 600;
                    text-align: center;
                    width: 100%;
                    display: block;
                    margin-bottom: 30px;                    
                    text-indent: -23px;                    
                }


					.MPauthorization .authorization_inner .auth_form fieldset .labelLogin{
						position: absolute;
						top: 145px;
						left: 180px;
						z-index: 400;		
						width: 620px;
						height: 49px;
						padding-top: 20px;
							font-size: 20px;
							font-weight: 600;
							color: #808080;												
						border:  none;
					}						

                .MPauthorization .authorization_inner .auth_form fieldset .login{
		              background: url(images/bg_form_auth_field.png) left top no-repeat;
		              border:  none;
		              width: 305px;
		              height: 69px;
		              position: relative;
		              left: 150px;
		              top: -39px;
		              padding-left: 20px;                    
							font-size: 20px;
							font-weight: 600;
							color: #808080;							
							border:  none;
                }

					.MPauthorization .authorization_inner .auth_form fieldset .labelPass{
						position: absolute;
						top: 220px;
						left: 180px;
						z-index: 400;		
						width: 305px;
						height: 39px;
						padding-top: 20px;
							font-size: 20px;
							font-weight: 600;
							color: #808080;													
						border:  none;								
					}

				  	.MPauthorization .authorization_inner .auth_form fieldset .password_field{
						  background: url(../images/bg_form_auth_field_.png) left top no-repeat;
	                 border:  none;
	                 width: 305px;
	                 height: 69px;
	                 position: relative;
	                 left: 150px;
	                 top: -36px;
						  font-size: 20px;
						  font-weight: 600;
						  color: #808080;	
						  z-index: 250;
	                 padding-left: 20px;   	                                  						  
						}                

                .MPauthorization .authorization_inner .auth_form fieldset input[type='checkbox']{
                    position: relative;
                    left: 20px;
                    top: -45px;
                }

                .MPauthorization .authorization_inner .auth_form fieldset .remember_me{
                    position: relative;
                    left: 250px;
                    top: -30px;
                    font-family: Trebuchet MS, arial, sans-serif;
                    font-size: 20px;
                    color: #808080;
                    font-weight: 500;

                }

                .MPauthorization .authorization_inner .auth_form fieldset input[type='submit']{
                    background: url(images/bg_auth_reg_button.png) left top no-repeat;
                    border:  none;
                    width: 638px;
                    height: 60px;
                    margin-top: 30px;
                    position: relative;
                    top: 20px;
                    left: 5px;
                    cursor: pointer;
                }

                .MPauthorization .authorization_inner .auth_form fieldset a.forget_password{
                    text-decoration: none;
                    color: #599A9E;
                    font-size: 18px;
							font-weight: 600;
                    position: absolute;
                    top: 240px;
                    right: 30px;
                }

                    .MPauthorization .authorization_inner .auth_form fieldset a.forget_password:hover{
                        text-decoration: underline;
                    }

                [u][b].MPauthorization .auth_reg_krest[/b][/u]{
                    background: url(images/bg_auth_reg_krest.png) left top no-repeat;
                    width: 80px;
                    height: 51px;
                    z-index: 110;
                    display: block;
                    position: absolute;
                    [i][b]right: 240px;
                    top: 30px;[/b][/i]
                }

		</style>

	</head>

	<body>


        <div class="MPauthorization" id="MPauthorization">
            <div class="auth_rule"></div>

            <div class="authorization_inner">
            <form class="auth_form" action="" method="post" name="loginregister" id="login-form">
					<fieldset>
					   <span class="label">Авторизация</span><br />


						<input type="text" class="login" id="modlgn-username" name="username" value="" maxlength="35"  /><br />


						<input type="password" class="password_field" id="modlgn-passwd" name="password" value="" maxlength="35"  /><br />

						<label class="remember_me" for="checkbox">Запомнить меня</label><br />

						<input type="checkbox" id="modlgn-remember" name="remember" value="" />

						<input type="submit"  value="" />

                  <a class="forget_password" href="#31">Забыли пароль?</a>                  


					</fieldset>

				</form>
            </div>
[u][b]			<a class="auth_reg_krest" href="" onclick="document.getElementById('MPauthorization').style.display = 'none !important'"></a>
        </div>[/b][/u]


	</body>
</html>

помогите пожалуйста на этой страничке поместить плашку с крестом под плашку формы

Svatov · October 4, 2011

Важно дать понять почему так,

Порядок наложения определяется значением z-index только для смежных элементов (т.е. для дочерних элементов одного контейнера). Если перекрываются два несмежных элемента, то на основе индивидуальных значений свойства z-index нельзя указать, какой из них находится сверху. Вместо этого надо задать свойство z-index для двух смежных контейнеров двух перекрывающихся элементов.

Sign In

две плашки. изменить порядок наложения

Question

cyklop77

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

george75

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information