עבור לתוכן

position: relative מופיע מעל absolute ב- IE7

על-ידי IlanF
ב תכנות

Featured Replies

פורסם

IE7 מציג לי אובייקט עם position relative מעל position absolute. לא משנה איך ניסיתי לשחק עם ה z-index לא הצלחתי לגרום לו להציג את זה כמו שצריך. IE8-9 מציגים את זה כמו שצריך.

מבחינת הקוד זה החלק החשוב:

<div class="nav">
            <div class="content-wrapper">
                <ul>
                    <li><a href="/index.php" class="button icon home">Главная</a></li>
                    <li><a href="" class="button icon menu">Категории</a>
                        <ul class="submenu">
                            <li><a href="">Category 1</a></li>
                            <li><a href="">long Category name 2</a></li>
                            <li><a href="">Category 3</a></li>
                            <li><a href="">Category 4</a></li>
                            <li><a href="">Category 5</a></li>
                        </ul>
                    </li>
                    <li><a href="/about.php" class="button icon person">О Компании</a></li>
                    <li><a href="/contact.php" class="button icon phone">Контакт</a></li>
                    <li class="right">
<a href="/cart.php" class="button icon cart">Корзина<span class="badge red">15</span>
</a></li>
                </ul>
            </div>
        </div>

        <div class="main">
<div class="attract">
    <div class="att-header">
        <span>title line 1</span>
        <br />
        <span>title line 2</span>
    </div>
    <div class="att-footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vivamus nec est nunc, non elementum massa. Aliquam erat volutpat. 
Fusce nec nibh orci, sed volutpat lacus. Nunc dapibus lectus in nulla aliquet malesuada. 
In leo Vestibulum at scelerisque augue.</p>
    </div>
</div>

.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 99999;
    width: 180px;
    border-top: none;
    position: absolute;
    top: 50px;
}
.attract {
    margin: auto 0 !important;
    background: #eae6e2 url('/images/attract_image.png') top center no-repeat;
    height: 277px;
    position: relative;
    overflow: hidden;
}
.attract .att-header {
    position: absolute;
    top: 30px;
    right: 0;
    text-align: right;
    direction: rtl;
    direction: ltr\9;
    margin: 0;
    padding: 0;
}

בסופו של דבר ככה זה נראה:

HtiH16v.png

אם אני מוריד מה- attract את ה position relative, התפריט מוצג כרגיל מעליו, אבל זה דופק לי את כל מה שאני ממקם לפיו (.att-header לדוגמה)

מישהו יודע איך אני מסדר את הזוועה הזאת?

  • ציטוט
    • פורסם

    הקוד שצירפת עובד כראוי אפילו בIE6.

    מהתמונות שצירפת, אם אכן האובייקט attract הוא הקונטיינר שצמוד לתפריט (שבאותו צבע כמו זה שבקוד שצירפת), אז כן רואים את התפריט מעליו, ומה שמסתיר את התפריט בפועל זה התמונה (שהיא אובייקט שלא מופיע בקוד הדוגמה, אז אני לא יודע מה המאפיינים שלה).

  • ציטוט
    • פורסם
    • מחבר

    התמונה היא רקע שאני מגדיר בCSS לdiv.attract (שאגב כן מופיע בקוד ששמתי, בבלוק השני), הוא לא אמור להפריע לכלום.

    אני לא יודע לגבי IE6, לא בדקתי עליו ואני גם לא מתכנן לבדוק עליו. יכול ליהיות שיעבוד שם וזה פשוט בעיה ספציפית של IE7 כמו שכבר יצא לי לראות בעבר

    עריכה

    הצלחתי לגרום לזה לעבוד. נתתי ל .nav גם position relative וזה פתר את הבעיה. מתברר זה איזה באג של IE7 שהוא לא מחשב נכון את ה z-index לאלמנטים שהם relative.

    מעבר לזה יש עוד פתרון, אבל במקרה שלי הוא לא עבד: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

    נערך על-ידי IlanF

  • ציטוט

    • ארכיון

    דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

    עבור לרשימת הדיונים

    דיונים חדשים