Jak zrobić jedną DIV za innym w HTML

Admin 0 Views 0 comments
Advertisement

Jak zrobić jedną DIV za innym w HTML


W kodzie HTML elementy DIV tworzą oddzielne sekcje zawartości na stronie sieci Web. Deweloperzy korzystają z DIV na różne sposoby, czasami ukrywając lub układając zawartość do czasu wystąpienia określonego działania, na przykład kliknięcia przez użytkownika linku. Możesz użyć kombinacji HTML i Cascading Style Sheets (CSS), aby utworzyć elementy DIV, a następnie umieścić jedna za drugą, dzięki właściwości CSS zwanej "z-index". Dopóki ustawisz właściwość "position" każdej DIV w kodzie CSS, możesz dodać wartość "z-index", aby stosować DIV za sobą.

Instrukcje

  • 1

Napisz kod HTML elementu DIV i umieść dowolną treść w tagach otwierających <div> i zamykanie </ div>. Przypisz DIV atrybut ID, aby nadać nazwę elementu DIV. Powinieneś wybrać nazwę, która jest unikalna z dowolnego innego elementu DIV i nie używaj tego samego identyfikatora więcej niż raz na tej samej stronie internetowej. Oto przykład:

<Div id = "firstdiv"> Zawartość jest tutaj ... </ div>

2

Utwórz drugą DIV poniżej pierwszego, a następnie dodaj jakąkolwiek treść, którą chcesz DIV. Nadaj tej DIV atrybut ID inną nazwą niż pierwszą.

<Div id = "seconddiv"> Zawartość jest tutaj ... </ div>

3

Otwórz plik CSS lub zlokalizuj znaczniki <style> między tagami <head> w pliku HTML, który jest kodowany. Możesz dodać znaczniki <styl>, jeśli nie są już obecne. Użyj kodu CSS, aby każdy DIV był typu typu "względny", jak pokazano w tym przykładzie:

Firstdiv {position: relative;}

Seconddiv {position: relative;}

4

Dodaj właściwość "z-index" do kodu CSS dla każdego elementu DIV. Ustaw wartość "z-index" wyższą dla DIV, która znajduje się na górze drugiej. Najniższa rozdzielczość DIV w stosie pobiera najniższą wartość "z-index".

Firstdiv {position: względny; Z-indeks: 2;}

Seconddiv {pozycja: względna; Z-indeks: 1;}

Możesz ustawić wartość "z-index" pomiędzy zero a 999. Można używać wartości ujemnych, ale mogą powodować problemy w złożonych układach i nie działają w starszych wersjach programu Internet Explorer.

Wskazówki:

Zawsze przechowuj swoje oryginalne pliki HTML i CSS przed ich edycją.


Pktree all rights reserved, if not specified, are original, reproduced need to indicate the source.