VPF::Z-index в ИЕ и ФФ - Форум программистов

BAR23

Дата 29.8.2008, 10:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 1.6.2008

Репутация: нет
Всего: нет

Єсть дивная вёрстка, тело с текстом (контейнер с 2 колонками - фон белый) и футер с фоном на бакгроунде. Нужно футер поднять но чтоб фон оказался над дивом в контейнере но под текстом (в FF всё ок. проблема в ИЕ6).
Вопрос как функционируют z-index. Какие приоритеты имеют блоки и елементы.
Код сдесь.

Код


<div class="container">

            <div class="leftCol">
                <p><a href=""><img src="img/link1.jpg" /></a></p>
                <p><a href=""><img src="img/link2.jpg" /></a></p>
                <p><a href=""><img src="img/link3.jpg" /></a></p>
                <p><a href=""><img src="img/link4.jpg" /></a></p>
                <p><a href=""><img src="img/link5.jpg" /></a></p>
                <h1>Контактная информация:</h1>
                
                <div class="adress">
                    <p></p>
                </div>
            </div>    <!--class="leftCol"-->
            
            <div class="rightCol">
                <div class="text">
                    <h1>Добро пожаловать в наше агенство!</h1>
                    <span><img src="img/Mal.jpg" alt="" /></span>
                    <p>Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці. Різний текст неввідомої довжинпи в мене тут на сторінці.</p>
                </div>
             </div>    <!--class="rightCol"-->    
</div>    <!--class="container"-->         
        
        
        <div class="footer">
            <div class="left">
                 <img src="img/number.gif" alt="" />
                 <p></p>
            </div>                        
        </div> <!--class="footer"-->

ЦСС

Код


    
* html .main{    
    height:100%;
    }    

.none span{    
    display:none;
    }

.main{
    position:relative;
    z-index:30;
    min-width:995px;
    min-height:100%;
    background:#DBD4C7;
    padding:5px 0;
    }    

    .cent,
    .footer{
        width:977px;
        }
        
    .cent{
        margin: auto;
        min-height:100%;
        /*padding-bottom:187px;*/
        }
        .header,
        .container{
            width:100%;
            }
        .header{
            position:relative;
            background:url(../img/head1.jpg) no-repeat left 0px #000;
            height:364px;    
            }    
                .head2{
                    position:absolute;
                    left:309px;
                    background:url(../img/head2.jpg) no-repeat;
                    width:668px;
                    height:90px;
                    }                    
                .head3{
                    position:absolute;
                    top:90px;
                    left:309px;
                    background:url(../img/head3.jpg) no-repeat;
                    width:415px;
                    height:88px;
                    }                
                .head4{
                    position:absolute;
                    top:90px;
                    left:724px;
                    background:url(../img/head4.jpg) no-repeat;
                    width:253px;
                    height:88px;
                    }                    
                .head6{
                    position:absolute;
                    top:178px;
                    left:309px;
                    background:url(../img/head6.jpg) no-repeat;
                    width:668px;
                    height:186px;
                    }
                    
            /*MENU*/
            .menu{    
                position:absolute;
                top:178px;
                left:0;
                background:url(../img/head5.jpg) no-repeat;
                width:309px;
                height:186px;
                padding:20px  0 13px 35px;    
                }            
                    .menu p{
                        padding-bottom:5px;
                        }                        
                    .menu p a{
                        color:#806D38;
                        font-size:16px;
                        }                    
                    .menu p a:link,
                    .menu p a:visited{
                        text-decoration:none;
                        }                    
                    .menu p a:hover{
                        color:#67B306;
                        text-decoration:underline;    
                        }
            /*MENU============*/
        
        .header img{
            position:absolute;
            top:280px;
            left:573px;
            }
                    
        .container{
            height:100%;
            position:relative;
            background: #FFF url(../img/top.jpg) no-repeat left top;
            /*margin-bottom:-188px;*/
            }        
        .container:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;    
            }
            
            /*LEFT COLS*/
            .leftCol{
                float:left;
                position:relative;
                z-index:50;
                /*background:#FFF;*/
                width:280px; /*314-34*/
                min-height:100%;
                padding:64px 0 188px 34px;
                }            
                    .leftCol p{
                        padding-top:6px;
                        }                        
                    .leftCol h1{
                        margin-top:85px;
                        padding:0 0 23px 0;
                        font-size:20px;
                        color:#806D38;
                        font-weight:100;
                        }                    
                    .adress{
                        background:url(../img/tel.jpg) no-repeat left top;
                        height:117px;
                        }                        
                    .adress p{
                        background:url(../img/address.jpg) no-repeat 84px 22px;
                        height:117px;
                        }            
            /*LEFT COLS===========*/

            /*RIGHT COLS*/                
            .rightCol{    
                margin-left:314px;
                height:100%;
                min-height:100%;
                padding:71px 27px 14px 40px;
                position:relative;
                z-index:50;
                }            
                    .rightCol div.text{
                        border-left:1px dashed #E2DDCC;
                        padding:0 0 72px 38px;
                        }                    
                    .rightCol div.text h1{
                        color:#806D38;
                        font-size:18px;
                        font-weight:bold;
                        }
                    .rightCol div.text span{
                        border:1px dashed #E2DDCC;
                        width:auto;
                        height:auto;
                        padding:2px;
                        margin:26px 19px 23px 0;
                        float:left;
                        }
                    .rightCol div.text p{
                        text-align:justify;
                        margin-top:26px;
                        }
            /*RIGHT COLS============*/


/*FOOTER*/

        .footer,
        .footer DIV.left{
                        height:180px;
                    }
        .footer{
            margin-top:-173px;
            position:relative;
            border:1px solid #000;
            background:url(../img/footer_text.gif) no-repeat right top;
            }                
        .footer DIV.left{
                    width:314px;
                    background: url(../img/footer-fon.jpg) no-repeat left top;
                    }        
        .footer div.left img{
                margin:32px 0 0 37px;
                    }
        .footer DIV.left p{
                        background:url(../img/copyright.gif) no-repeat 39px;
                        height:50px;
                        }    
/*FOOTER=======*/

webster

Дата 29.8.2008, 16:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Пару слов о z-index, действуют они на абсолютно позиционированные элементы, например, если один абсолютно позиционированный элемент будет иметь z-index: 1; а другой z-index: 10; то тот у кого z-index больше - будет находиться сверху.
Но у z-index так же может быть и отрицательная величина, ее можно использовать следующим образом, при "прочтении" кода страницы броузером каждому последующему непозиционированному элементу назначается как бы больший z-index, т.е. если рассматривать страницу в трехмерном пространстве то все элементы будут наслаиваться друг на друга, но задав отрицательную величину z-index можно изменить этот порядок (только опять же нужно задать элементу либо position: relative; либо float: left(right);)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »