আই 7 জেড-ইনডেক্স লেয়ারিং ইস্যু

163

আমি আই 7 এর z-indexবাগের একটি ছোট্ট পরীক্ষার কেসকে আলাদা করে দিয়েছি , তবে কীভাবে এটি ঠিক করতে হয় তা জানি না। z-indexসারাদিন ধরে খেলছি ।

z-indexআই 7 এর সাথে কী ভুল ?

সিএসএস পরীক্ষা করুন:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

পরীক্ষার এইচটিএমএল:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

css internet-explorer-7 z-index

— rezna
সূত্র

আপনি যদি কোনও কাজের সন্ধান করছেন এবং আপনি আপনার সমস্ত এইচটিএমএলকে কিছুটা স্ট্যাক প্রসঙ্গে সুন্দরভাবে সাজানোর জন্য চেষ্টা না করে দেখুন: brenelz.com/blog/squish-tinternet-explorer-z-index-bug

— নাসরাল

268

জেড-সূচক কোনও পরিপূর্ণ পরিমাপ নয়। জেড-ইনডেক্স সহ কোনও উপাদানের পক্ষে 1000 জেড-ইনডেক্স সহ একটি উপাদান থাকা সম্ভব: 1 - যতক্ষণ না স্বতন্ত্র উপাদানগুলি বিভিন্ন স্ট্যাকিং প্রসঙ্গে থাকে ।

আপনি যখন জেড-সূচক নির্দিষ্ট করেন, আপনি একই স্ট্যাকিং প্রসঙ্গে অন্যান্য উপাদানগুলির সাথে তুলনামূলকভাবে এটি নির্দিষ্ট করে থাকেন এবং জেড-ইনডেক্সে সিএসএস স্পেসের অনুচ্ছেদে বলেছে যে একটি নতুন স্ট্যাকিং প্রসঙ্গটি কেবলমাত্র জেড-ইনডেক্সের সাথে অবস্থানযুক্ত সামগ্রীর জন্য তৈরি করা হয়েছে than স্বয়ংক্রিয় (আপনার সমগ্র ডকুমেন্ট অর্থ একটি একক স্ট্যাক প্রসঙ্গে হওয়া উচিত), আপনি করেনি একটি স্থান বিঘত গঠন করা: স্থান বিষয়বস্তু Z-সূচক ছাড়াই এই একটি নতুন স্ট্যাক প্রসঙ্গে যেমন দুর্ভাগ্যবশত IE7 ব্যাখ্যা করে।

সংক্ষেপে, এই সিএসএস যুক্ত করার চেষ্টা করুন:

#envelope-1 {position:relative; z-index:1;}

বা দস্তাবেজটিকে নতুনভাবে ডিজাইন করুন যাতে আপনার স্প্যানগুলির অবস্থান নেই: আপেক্ষিক আর কোনও:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

এই বাগের অনুরূপ উদাহরণের জন্য http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ দেখুন । একটি পিতামাতুলক উপাদানটি দেওয়ার (আপনার উদাহরণের মধ্যে খাম -1) উচ্চতর জেড-সূচক কাজ করার কারণ হ'ল খাম -1 এর সমস্ত বাচ্চারা (মেনু সহ) খাম -1 এর সমস্ত ভাইবোনকে ওভারল্যাপ করবে (বিশেষত, খাম -2)।

যদিও জেড-ইনডেক্স আপনাকে পরিষ্কারভাবে সংজ্ঞা দিতে দেয় যে কীভাবে জিনিসগুলি ওভারল্যাপ হয়, এমনকি জেড-ইনডেক্স ছাড়াই লেয়ারিং অর্ডারটি ভালভাবে সংজ্ঞায়িত করা হয় । অবশেষে, আই 6 এর একটি অতিরিক্ত বাগ রয়েছে যা সিলেক্টবক্স এবং আইফ্রেমে অন্য কিছুর শীর্ষে ভাসতে পারে।

— ইমন নের্বোন
সূত্র

4

পরিশেষে এটি সমাধান হয়েছে :) - আপেক্ষিক অবস্থানটি সত্যই বিরক্তিকর তাই আমি কোনওভাবে 'খাম' উপাদানগুলি ছাড়াই আপনার ধারণাটি গ্রহণ করেছি - এটি সমস্যার সমাধান এবং কাজ করার জন্য মনে হয় - পরামর্শ বাক্সের জন্য কিছুটা কোডকে নতুনভাবে ডিজাইন করতে হবে - THX a লট

— রেজনা

6

তিনটি আলাদা জিনিস রয়েছে যা উপাদানগুলি একে অপরকে ওভারল্যাপ করে কীভাবে প্রভাবিত করে: স্ট্যাকিং প্রসঙ্গ, উত্স ক্রম এবং পেইন্টিং ক্রম। স্ট্যাকিং প্রসঙ্গটি মোকাবেলা করার সময় সর্বাধিক সুস্পষ্ট সমস্যাগুলি উপস্থিত হয় - অন্য দুটি জেনে যাওয়া আপনাকে আরও গুপ্ত গোটাকগুলি বের করতে সহায়তা করবে। সূত্র: সিএসএস-আলোচনা উইকি

— আরজেবি

2

প্যারেন্ট এলিমেন্টে জেড-ইনডেক্স যুক্ত করা একটি দুর্দান্ত সমাধান

— ড্যানিয়েউন লিউ

2

আমি তোমায় ভালোবাসি. যুক্ত পজিশন: আপেক্ষিক এবং জেড-ইনডেক্স: 500 আমার পিতামাতার কাছে এবং এটি এটি স্থির করেছে!

— আইরেমিক গৌরাত-অ্যাপেলি

2

আমি সমাধানগুলি প্রদর্শন করে এমন মন্তব্যগুলির সাথে এই সমস্যার এক ঝলক তৈরি করেছি। jsfiddle.net/fNcGu/3

— ক্রিস্টোফার জনসন

15

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

— nixis
সূত্র

উপরের "সঠিক" সমাধানটি পড়ার পরে, আমি আমার তুচ্ছ প্রশ্নের তুলনায় আমার আরও জটিল সমস্যার জন্য একটি সমাধান তৈরি করার চেষ্টা করেছি। তারপরে আমি এই উত্তরটি ছুঁড়ে দিয়েছি এবং এটি একটি কবজির মতো কাজ করেছে। যদি উপরের সমাধানটি সঠিক হয় তবে এটি অবশ্যই সহজ। ধন্যবাদ!

— ল্যান্ডন

11

আই-পজিশনে থাকা উপাদানগুলিতে 0-এর জেড-ইনডেক্স মান দিয়ে শুরু করে একটি নতুন স্ট্যাকিং প্রসঙ্গ উত্পন্ন হয় Therefore তাই জেড-সূচক সঠিকভাবে কাজ করে না।

বাগটি ঠিক করার জন্য পিতামণ্ডলকে উচ্চতর জেড-ইনডেক্স মান (সন্তানের জেড-সূচক মানের চেয়েও বেশি হতে পারে) দেওয়ার চেষ্টা করুন।

— ed1nh0
সূত্র

1

ধন্যবাদ। এই সমাধানটি পিতা-পাত্রে একটি জেড-সূচক দিয়ে কাজ করেছিল, সন্তানের জেড-সূচকের চেয়ে অগত্যা বেশি নয়।

— নীলমেগ

4

আমি এই সমস্যার মুখোমুখি হয়েছি, তবে একটি বৃহত প্রকল্পে যেখানে এইচটিএমএল পরিবর্তনের জন্য অনুরোধ করা হয়েছিল এবং একটি সম্পূর্ণ সমস্যা হয়ে উঠেছে, তাই আমি একটি খাঁটি সিএসএস সমাধান খুঁজছিলাম।

position:relative; z-index:-1আমার প্রধান শরীরের সামগ্রীতে রেখে আমার শিরোনাম হঠাৎ করে আই 7 এর শরীরের সামগ্রীর উপরে প্রদর্শিত কন্টেন্টটি ফেলেছে (এটি ইতিমধ্যে অন্য সমস্ত ব্রাউজারে এবং ie8 + এ ইস্যু ছাড়াই প্রদর্শিত হয়েছিল)

তারপরে সমস্যাটি তখন এই সমস্ত হোভার এবং অক্ষরের সাথে সমস্ত উপাদানগুলিতে ক্রিয়াকলাপগুলি অক্ষম করে z-index:-1i সুতরাং আমি পুরো পৃষ্ঠার মূল উপাদানটিতে গিয়ে এটিকে দিয়েছিলামposition:relative; z-index:1

যা সমস্যাটি স্থির করেছে এবং সঠিক লেয়ারিং কার্যকারিতা ধরে রেখেছে।

কিছুটা হ্যাকি লাগছে, তবে প্রয়োজন মতো কাজ করেছে।

— lukeroxout
সূত্র

3

আমি দেখতে পেলাম যে আমি একটি ডি 7 এর উপর একটি বিশেষ জেড-সূচক উপাধি একটি ie7 নির্দিষ্ট স্টাইলশিটে রেখেছি:

ডিভ {জেড-সূচক: 10; }

স্লাইডারটির উপরে প্রদর্শন করতে কোনও ন্যাভের মতো সম্পর্কযুক্ত ডিভের জেড-ইনডেক্সের জন্য। আমি স্লাইডার ডিভ নিজেই কোনও জেড-সূচক যুক্ত করতে পারিনি।

— ইবার সমাধান
সূত্র

আমি দেখতে পেলাম যে এটি ছাড়াও html {z-index:1; position:relative;}মেনুটিকে আইই-তে কারাউসেল চিত্রটি যেতে দেয়।

— bassplayer7

2

যদি প্যারেন্ট নোডগুলিতে পূর্বে উল্লিখিত উচ্চতর জেড-ইনডেক্সিং আপনার প্রয়োজন অনুসারে হয় না তবে আপনি বিকল্প সমাধান তৈরি করতে পারেন এবং এটি IE শর্তসাপেক্ষ মন্তব্য দ্বারা বা মডার্নজার দ্বারা সরবরাহিত (আরও আদর্শবাদী) বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে সমস্যাযুক্ত ব্রাউজারগুলিকে লক্ষ্য করতে পারেন।

মডার্নিজারের জন্য দ্রুত (এবং স্পষ্টতই কাজ করছে) পরীক্ষা:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

— উপগোলক
সূত্র

খুব সুন্দর! বৈশিষ্ট্য সনাক্তকরণ অবশ্যই যাওয়ার উপায়।

— জেসন

1

দেখে মনে হচ্ছে এটি কোনও বাগ নয়, কেবল CSS স্ট্যান্ডার্ডের সাথে আলাদা বোঝার জন্য। যদি বাইরের ধারকটি জেড-সূচক নির্দিষ্ট না করে তবে অভ্যন্তরীণ উপাদানটি একটি উচ্চতর জেড-সূচক নির্দিষ্ট করে। সুতরাং ধারকটির ভাইবোন সম্ভবত উচ্চ জেড-ইনডেক্স উপাদানটিকে ওভারলে করবে। এমনকি যদি এটির মতো হয় তবে এটি কেবল আই 7 এ ঘটে তবে আই 6, আই 8 এবং ফায়ারফক্স ঠিক আছে।

— c2j
সূত্র

0

আই আই general এ সাধারণভাবে, নির্দিষ্ট ইউআই-উপাদানগুলি স্থানীয় নিয়ন্ত্রণ সহ প্রয়োগ করা হয়। এই নিয়ন্ত্রণগুলি সম্পূর্ণ পৃথক পর্যায়ে (উইন্ডো?) রেন্ডার করা হয় এবং জেড-ইনডেক্স নির্বিশেষে সর্বদা অন্য কোনও নিয়ন্ত্রণের উপরে উপস্থিত থাকে। নির্বাচন-বাক্সগুলি এই জাতীয় সমস্যাযুক্ত নিয়ন্ত্রণ।

এই ইস্যুটির চারপাশে কাজ করার একমাত্র উপায় হ'ল আইটি পৃথক "উইন্ডো" হিসাবে উপস্থাপন করে এমন সামগ্রী তৈরি করা - অর্থাৎ আপনি একটি পাঠ্যবক্সের উপরে একটি নির্বাচনবক্স রাখতে পারেন, বা আরও কার্যকরভাবে একটি আইফ্রেমে।

সংক্ষেপে, আইইটিকে উপরের বিল্ট-ইন ইউআই নিয়ন্ত্রণগুলি রাখার জন্য আপনাকে আইফ্রেমে মেনুর মতো জিনিসের মতো "অন-হোভার" রাখতে হবে।

এটি আই 7 এ স্থির করা উচিত ছিল (দেখুন http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ) তবে সম্ভবত আপনি কোনও ধরণের সামঞ্জস্য মোডে চলেছেন?

— ইমন নের্বোন
সূত্র

আইআই z জেড-ইনডেক্স বাগ সম্পর্কে আমি জানি - এবং এটি স্থির - তবে আই 7-তে তুলনামূলকভাবে / একেবারে অবস্থানের উপাদান / ইনপুটগুলির সাথে আরও একটি সমস্যা রয়েছে (যা আইই 8 এ স্থির করা হয়েছে) - আমি বেশ কয়েকটি সমাধান পেয়েছি (জেড-ইনডেন্স দিয়ে খেলছি), তবে তাদের কারও পক্ষে কাজ হয়নি - সে কারণেই আমি সেখানে জিজ্ঞাসা করছি ... যাইহোক উত্তরের জন্য ধন্যবাদ।

— রেজানা

0

এই বাগটি স্ট্যান্ডিং স্ট্যান্ডিং স্ট্যান্ডিং প্রসঙ্গ IE বাগের চেয়ে কিছুটা আলাদা সমস্যা বলে মনে হচ্ছে। আমার একাধিক স্ট্যাকড ইনপুটগুলির সাথে একইরকম সমস্যা ছিল (প্রতিটি সারিতে অটোকম্প্লেটার সহ মূলত একটি টেবিল)। আমি খুঁজে পেয়েছি একমাত্র সমাধান হ'ল প্রতিটি কক্ষকে হ্রাসকারী জেড-সূচক মান দেওয়া।

— জেরেমি কাউফম্যান
সূত্র

0

আপনি যদি ড্রপডাউন মেনু তৈরি করতে চান এবং জেড-ইনডেক্সে কোনও সমস্যা দেখাতে চান তবে আপনি এটি একই মান (জেড-সূচক: 999; উদাহরণস্বরূপ) এর জেড-ইনডেক্স তৈরি করে সমাধান করতে পারেন .. কেবল পিতামাতা এবং শিশু ডিভ এর জেড-সূচক রাখুন এবং যে সমস্যার সমাধান করবে। আমি এটি দিয়ে সমস্যা সমাধান। যদি আমি বিভিন্ন জেড-সূচকগুলি রাখি, অবশ্যই, এটি আমার পিতামাতার ডিভের উপর দিয়ে আমার সন্তানের ডিভ দেখিয়ে দেবে, তবে আমি একবার নিজের মাউসটিকে মেনু ট্যাব থেকে সাব-মেনু ডিভ (ড্রপডাউন তালিকা) এ সরাতে চাইলে তা অদৃশ্য হয়ে যায় ... আমি একই মানের জেড-ইনডেক্স রেখেছি এবং সমস্যাটি সমাধান করছি ..

— মার্কো
সূত্র

0

আমি এটি আই 7 (এটির একটি সরঞ্জামদণ্ড) এর বিকাশকারী সরঞ্জামগুলি ব্যবহার করে এবং ডিভের ধারকটিতে একটি নেতিবাচক জেড-সূচক যুক্ত করে অন্য ডিভের নীচে থেকে সমাধান করেছি।

— লুকাস
সূত্র