সিএসএস ব্যবহার করে উপাদানকে সামনে আনুন

Question 1

আমি কীভাবে চিত্রগুলি সামনে আনতে পারি তা বুঝতে পারি না CSS। আমি ইতিমধ্যে 1000- তে জেড-ইনডেক্স এবং আপেক্ষিকের কাছে অবস্থান নির্ধারণ করার চেষ্টা করেছি, তবে এটি এখনও ব্যর্থ হয়।

এখানে উদাহরণ-

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}

<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>

স্নিপেট প্রসারিত করুন

Question 2

যোগ করুন z-index:-1এবং position:relativeকনটেন্টে

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    z-index: -1;
    position:relative;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}

<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>

স্নিপেট প্রসারিত করুন

Question 3

নোট: Z-সূচক শুধুমাত্র স্থান উপাদান কাজ করে ( position:absolute, position:relative, অথবা position:fixed)। এর মধ্যে একটি ব্যবহার করুন।

Question 4

আমার ক্ষেত্রে আমাকে এইচটিএমএল ফাইলের শেষে আমি যে উপাদানটি চেয়েছিলাম সেটির এইচটিএমএল কোডটি সরিয়ে নিয়ে যেতে হয়েছিল, কারণ যদি একটি উপাদানটির জেড-সূচক থাকে এবং অন্যটির জেড সূচক না থাকে তবে এটি কাজ করে না।

Question 5

অন্য দ্রষ্টব্য: অন্যান্য বস্তুর তুলনায় শিশুদের অবজেক্টের দিকে তাকালে জেড-ইনডেক্সটি অবশ্যই বিবেচনা করা উচিত।

উদাহরণ স্বরূপ

<div class="container">
    <div class="branch_1">
        <div class="branch_1__child"></div>
    </div>
    <div class="branch_2">
        <div class="branch_2__child"></div>
    </div>
</div>

আপনার দেওয়া যদি branch_1__childএকটি Z-সূচক 99এবং আপনার দেওয়া branch_2__child1 এর একটি Z-সূচক, কিন্তু আপনি আপনার দিয়েছেন branch_2একটি Z-সূচক 10এবং আপনার branch_1একটি Z-সূচক 1, আপনার branch_1__childএখনো সামনে না দেখাবে আপনারbranch_2__child

যাইহোক, আমি যা বলতে চাইছি তা হ'ল; আপনি যে উপাদানটির কোনও অভিভাবককে সামনে রাখতে চান তার আত্মীয়ের তুলনায় তার চেয়ে কম জেড-ইনডেক্স থাকে, সেই উপাদানটি উচ্চতর স্থাপন করা হবে না।

জেড-সূচক এর ধারকগুলির সাথে সম্পর্কিত। শ্রেণিবিন্যাসের আরও দূরে একটি ধারকটিতে রাখা একটি জেড-সূচক মূলত একটি নতুন "স্তর" শুরু করে

বাধা [সূচনা] tion

চারপাশে খেলতে আসা একটি বেহালতা এখানে:

https://jsfiddle.net/orkLx6o8/