Đưa phần tử lên trước bằng CSS

Question 1

Tôi không thể tìm ra cách đưa hình ảnh lên trước bằng cách sử dụng CSS. Tôi đã thử đặt z-index thành 1000 và vị trí là tương đối, nhưng nó vẫn không thành công.

Đây là ví dụ-

#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>

Mở rộng đoạn mã

Question 2

Thêm z-index:-1và position:relativevào .content

#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>

Mở rộng đoạn mã

Question 3

Lưu ý: z-index chỉ hoạt động trên các yếu tố vị trí ( position:absolute, position:relativehoặc position:fixed). Sử dụng một trong những.

Question 4

Trong trường hợp của tôi, tôi phải di chuyển mã html của phần tử mà tôi muốn ở phía trước ở cuối tệp html, bởi vì nếu một phần tử có chỉ mục z và phần tử kia không có chỉ mục z thì nó không hoạt động.

Question 5

Một lưu ý khác: chỉ số z phải được xem xét khi xem xét các đối tượng con so với các đối tượng khác.

Ví dụ

<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>

Nếu bạn đã đưa ra branch_1__childchỉ số z 99và bạn đã đưa ra branch_2__childchỉ số z là 1, nhưng bạn cũng đưa branch_2chỉ số z của 10bạn và branch_1chỉ số z của 1bạn, ảnh branch_1__childvẫn của bạn sẽ không hiển thị trướcbranch_2__child

Dù sao, những gì tôi đang cố gắng nói là; nếu phần tử cha của một phần tử bạn muốn đặt ở phía trước có chỉ số z thấp hơn giá trị tương đối của nó, phần tử đó sẽ không được đặt cao hơn.

Chỉ số z có liên quan đến các vùng chứa của nó. Chỉ mục z được đặt trên một vùng chứa xa hơn trong hệ thống phân cấp về cơ bản bắt đầu một "lớp" mới

Incep [khởi đầu] tion

Đây là một trò đùa để chơi xung quanh:

https://jsfiddle.net/orkLx6o8/