تحديد المواقع Divs مع Z-Internal في Internet Explorer 7

StackOverflow https://stackoverflow.com/questions/1681122

سؤال

لدي اثنين من الأقارب المحكوم عليهم A & B. A DIV كعنصر أطفال يسمى "وهو موقع مطلق ولديه مؤشر Z بقيمة 1000. Div B" هو عنصر طفل من DIV B ووضعه مطلقا أيضا.

فايرفوكس يجعل هذا كما هو متوقع: A'-B'BA (من الأقرب إلى الأقرب من المستخدم) ومع ذلك، في IE7 أحصل على: B'-B-A'-A

من فضلك هل يمكن لشخص ما مساعدتي مع الحل البديل؟ لقد أهدرت بالفعل ساعات مع هذه المشكلة!

شكرا مقدما، ستيفان

هل كانت مفيدة؟

المحلول

المشكلة هي أنه في IE7 والإصدارات السابقة، فإنه أساسا "إعادة تعيين" مؤشر Z داخل العناصر المحيطة النسبية.

إذا لم يكن أي من هذه العمل "آخر منتجع" أدناه

لذلك في IE في هذه الحالة، سيكون الشريط أعلى فو في طريقة الفهرسة العرجاء في IE7:

<div style="position:relative;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative;">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>

الحل البالغة عرجاء على قدم المساواة؛ عليك أن تتأكد من أن الوالد من العناصر التي تريد أن تكون في قمة z-مفهرسة أعلى من آباء الوالدين الذي تريده في الأسفل.:

<div style="position:relative; z-index:2;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative; z-index:1">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>

أو يمكنك تبديل أي واحد يأتي أولا في HTML مما يؤدي إلى عرض واحد على الآخر.

<div style="position:relative;">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>
<div style="position:relative;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>

ملاحظة: هذا هو كل شيء على افتراض أنك تفعل شيئا مع FOO و BAR التي تسببها تتداخل. مثالبي بوضوح لا يتداخل بحيث يكون التأثير من الصعب معرفة ما إذا كنت نسخ ولصقه بشكل مباشر.

وأضاف:

الملاذ الأخير

لوضعها ببساطة، هذا الخيار تمتص. وبعد ولكن هذا هو الخيار الوحيد إذا كان يجب عليك التعامل مع هذه المشكلة في IE7 والإصدارات السابقة.

استخدم JavaScript لتحريك Div ووضعه حيث يجب أن يكون. الفكرة الأساسية هنا هي سحب الدف المحرك المطلق إلى عقدة الجسم وتحريكها إلى حيث يجب أن تكون. أود أن أوصي بشدة باستخدام jQuery للقيام بكل هذا. قمت بإجراء رمز المثال بدون مسج، ولكن إذا كنت لا تستخدم JQuery حتى الآن، يجب أن تبدأ. سيحصل على هذه المهمة في بعض الأسطر.

<body>
    <div style="position:relative; z-index:2;"> 
        OUTERFOO 
        <div style="position:absolute; z-index:1000; background:red;">
            FOO
        </div> 
    </div> 
    <div style="position:relative; z-index:1">
        OUTERBAR 
        <div id="bar" style="position:absolute; top:-30px; z-index:1; background:green;">
            BAR
        </div>
    </div>
    <button onclick="moveThisCrapForIE7();">Test</button>
    <script type="text/javascript" language="javascript">
        // Probably best to kick this off when your body is totally loaded.
        // jQuery's $(document).ready is really good for that.
        // for now I'm just using a button to test.
        function moveThisCrapForIE7() {
            // You'll need something more reliable for browser detection here, this will only get IE7 not IE6.
            // I'd recommend jQuery for everything really. It'll save you miles of code.
            if(navigator.appVersion.indexOf('MSIE 7') > -1) {
                // Get your element and move it to where you want it.
                var bar = document.getElementById('bar');
                document.body.appendChild(bar);
                //Then you'll need to monkey with the location 
                // to make sure it's where you want it.
                bar.style.top = '15px';
                bar.style.left = '90px';
                bar.style.zIndex = '3';
            }
        }
    </script>
</body>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top