นำองค์ประกอบไปด้านหน้าโดยใช้ CSS

Question 1

ฉันคิดไม่ออกว่าจะนำภาพมาใช้CSSอย่างไร ฉันได้ลองตั้งค่า z-index เป็น 1,000 และวางตำแหน่งให้สัมพันธ์กันแล้ว แต่ก็ยังล้มเหลว

นี่คือตัวอย่าง -

#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-index ทำงานเฉพาะในองค์ประกอบตำแหน่ง (position:absolute , position:relativeหรือposition:fixed) ใช้อย่างใดอย่างหนึ่ง

Question 4

ในกรณีของฉันฉันต้องย้ายรหัส html ขององค์ประกอบที่ฉันต้องการที่ด้านหน้าที่ส่วนท้ายของไฟล์ html เพราะถ้าองค์ประกอบหนึ่งมีดัชนี z และอีกองค์ประกอบหนึ่งไม่มีดัชนี z จะไม่ทำงาน

Question 5

หมายเหตุอื่น: ต้องพิจารณาดัชนี z เมื่อมองไปที่วัตถุลูกที่สัมพันธ์กับวัตถุอื่น

ตัวอย่างเช่น

<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__childz-index 99และคุณให้branch_2__childz-index เท่ากับ 1 แต่คุณยังให้branch_2z-index ของ10คุณและbranch_1z-index ของ1คุณด้วยbranch_1__childภาพนิ่งจะไม่ปรากฏที่หน้าbranch_2__child

อย่างไรก็ตามสิ่งที่ฉันพยายามจะพูดคือ หากพาเรนต์ขององค์ประกอบที่คุณต้องการวางไว้ด้านหน้ามีดัชนี z ต่ำกว่าสัมพัทธ์องค์ประกอบนั้นจะไม่ถูกวางไว้สูงกว่า

ดัชนี z สัมพันธ์กับคอนเทนเนอร์ ดัชนี z ที่วางอยู่บนคอนเทนเนอร์ที่อยู่ไกลออกไปในลำดับชั้นโดยพื้นฐานแล้วจะเริ่ม "เลเยอร์" ใหม่

Incep [เริ่มต้น]

นี่คือซอที่จะเล่น:

https://jsfiddle.net/orkLx6o8/