Đưa phần tử lên phía trước bằng cách sử dụng CSS

Tôi không thể tìm ra cách đưa hình ảnh lên phía trước bằng cách sử dụng CSS. Tôi đã cố gắng thiết lập z-index đến 1000 và vị trí tương đối, nhưng nó vẫn thất bại.Đưa phần tử lên phía trước bằng cách sử dụng CSS

Dưới đây là example-

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

Nguồn

2013-04-03 Stylock

Mang gì lên trước ? Ngoài ra, ** ** không được chấp nhận nữa (https://developer.mozilla.org/en-US/docs/HTML/Element/col). – Vucko

Mang hình ảnh về phía trước. – Stylock

Tại sao bạn sử dụng các bảng lồng nhau để tạo một menu? – Blender

Thêm z-index:-1 và position:relative để .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>

Nguồn

2013-04-03 08:16:00 Sowmya

Giải pháp của bạn hoạt động hoàn hảo. Bạn có thể giải thích tại sao điều này có hiệu quả? – Germstorm

@Germstorm 'Z-index' kiểm soát cách hình ảnh hoặc div xếp chồng lên nhau. Div/hình ảnh có giá trị z-index cao hơn chiếm vị trí phía trước và thấp hơn sẽ ở lại phía sau. – Sowmya

Tôi không thực sự nhớ rõ hoàn cảnh của câu hỏi của tôi, nhưng vấn đề của tôi là, tôi hiểu những gì 'chỉ số z' làm, nhưng nó vẫn không hoạt động. Những gì tôi đã học được từ câu trả lời này là, với 'z-index' bạn cũng phải xem xét đến hệ thống cấp bậc cha. – Germstorm

Lưu ý: z-index only works on positioned elements (position:absolute, position:relative hoặc position:fixed). Sử dụng một trong số đó.

Nguồn

2015-06-26 01:42:01

Trong trường hợp của tôi, tôi phải di chuyển mã html của phần tử 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ì không t làm việc.

Nguồn

2015-07-09 05:19:42 Javobal

2 phần của câu trả lời của bạn không liên quan (ít nhất là không có chi tiết khác). Phần đầu tiên là một giải pháp vì các thuộc tính khác bằng nhau_ phần tử thứ hai trong mã HTML được hiển thị phía trên các phần tử trước đó. Phần thứ hai là một số nhận xét về cách z-index có một số hiệu ứng. – FelipeAls

điểm tốt về tất cả các yếu tố phải có chỉ mục z để hoạt động. cảm ơn! –

Lưu ý khác: z-index phải được xem xét khi xem các đối tượng trẻ em có liên quan đến 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 đã branch_1__child một z-index của 99, các ngươi đã branch_2__child một z-index trong tổng số 1, nhưng bạn cũng đã branch_2 bạn một z-index của 10 và branch_1 của bạn một z-index của 1, số branch_1__child của bạn vẫn sẽ không hiển thị ở phía trước branch_2__child

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

Chỉ mục z có liên quan đến các vùng chứa của nó. Một z-index đặt trên một container 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 [thành lập] tion

Dưới đây là một fiddle để chơi xung quanh:

https://jsfiddle.net/orkLx6o8/

Nguồn

2017-01-12 18:43:29 ntgCleaner

Đưa phần tử lên phía trước bằng cách sử dụng CSS

Trả lời

Các vấn đề liên quan