Przesuwaj element na wierzch za pomocą CSS

Nie mogę dowiedzieć się, jak przenieść obrazy na wierzch za pomocą CSS. Próbowałem już ustawić z-index na 1000 i pozycję na względną, ale nadal się nie udaje.Przesuwaj element na wierzch za pomocą CSS

Oto przykład-

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

Źródło

2013-04-03 Stylock

Doprowadzić co do przodu ? Również ** ** jest [przestarzałe] (https://developer.mozilla.org/en-US/docs/HTML/Element/col). – Vucko

Przenieś obrazy na wierzch. – Stylock

Dlaczego używasz tabel zagnieżdżonych do tworzenia menu? – Blender

Dodaj z-index:-1 i position:relative do .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>

Źródło

2013-04-03 08:16:00 Sowmya

Twoje rozwiązanie działało idealnie. Czy możesz wyjaśnić, dlaczego to działa? – Germstorm

@Germstorm 'Z-index' określa, w jaki sposób obrazy lub elementy div układają się względem siebie. Div/image o wyższej wartości indeksu Z zajmuje pierwsze miejsce, a niższe pozostanie w tyle. – Sowmya

Naprawdę nie pamiętam dokładnie okoliczności mojego pytania, ale mój problem polegał na tym, że rozumiałem, co robi "z-index", ale wciąż nie działało. Czego nauczyłem się z tej odpowiedzi, to że z 'z-index' musisz również wziąć pod uwagę hierarchię macierzystą. – Germstorm

Uwaga: z-index only works on positioned elements (position:absolute, position:relative lub position:fixed). Użyj jednego z nich.

Źródło

2015-06-26 01:42:01

W moim przypadku musiałem przenieść kod html elementu, który chciałem z przodu na końcu pliku html, ponieważ jeśli jeden element ma indeks Z, a drugi nie ma indeksu z to doesn ' t działa.

Źródło

2015-07-09 05:19:42 Javobal

Dwie części twojej odpowiedzi nie są powiązane (przynajmniej bez innych szczegółów). Pierwsza część to rozwiązanie, ponieważ _al inne właściwości równe_ ostatni element w kodzie HTML wyświetlane są powyżej poprzednich. Druga część to komentarz na temat wpływu z-indeksu. – FelipeAls

Dobra rzecz o wszystkich elementach musi mieć indeks Z, aby działał. dzięki! –

Kolejna uwaga: indeks z musi być brany pod uwagę podczas przeglądania obiektów podrzędnych względem innych obiektów.

Na przykład

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

Jeśli dałeś branch_1__child z-index of 99 a daliście branch_2__child z-index 1, ale także dał swoją branch_2 z-index of 10 i swojej branch_1 się z-index of 1, twoje nadal nie pojawi się przed twoim branch_2__child Tak czy inaczej, staram się powiedzieć; jeśli element nadrzędny elementu, który ma być umieszczony z przodu, ma niższy indeks Z niż jego relatywny, element ten nie zostanie umieszczony wyżej.

Indeks Z odnosi się do swoich kontenerów. Z-index umieszczone na pojemniku dalej w górę w hierarchii zasadzie rozpoczyna nową „warstwę”

Incep [powstania] cja

Oto skrzypce się bawić:

https://jsfiddle.net/orkLx6o8/

Źródło

2017-01-12 18:43:29 ntgCleaner

Przesuwaj element na wierzch za pomocą CSS

Odpowiedz

Powiązane problemy