Tytuł, w zasadzie. Robiłem wiele z mojej pracy przy użyciu pozycjonowania marginesów zamiast rzeczy takich jak position: relative, tylko dlatego, że nie wiedziałem, że możesz to kontrolować w ten sposób.Dlaczego nie używać pozycjonowania marży zamiast pozycji: względna góra 5px?
Co należy zrobić, aby uzyskać margin i dlaczego mam wykonać position, gdy wykonanie zadania zostanie wykonane za pomocą?
Po pierwsze, statyczne pozycjonowanie ignoruje wartość top, więc myślę, że twoje pytanie jest trochę zagmatwane. Jeśli to, o co chciałeś zapytać, to position:relative, oto odpowiedź, która to rozwiązuje.
Ogólnie rzecz biorąc, uważam, że lepiej używać marginesów i dopełnienia do pozycjonowania elementów względem ich sąsiadów, a nie względnego pozycjonowania (co przypuszczam, że naprawdę pytasz, ponieważ statyczne pozycjonowanie ignoruje wartość top).
Względne pozycjonowanie lub marginesy ujemne mogą powodować nakładanie się obiektów, co rzadko jest tym, czego chcę i może prowadzić do problemów z routingiem zdarzeń, ramkami, tłem itp., Jeśli nie jest to jednoznacznie określone. Czynię cię position:relative jako pojemnik dla dzieci, który jest position: absolute, ale prawie nigdy nie używaj go do przenoszenia samego elementu, ponieważ granice i obicie są prawie zawsze czystsze.
Co do dodatkowej części pytania o to, co robi margines, prawdopodobnie powinieneś zrobić małe wyszukiwanie, a niektóre czytanie jako kilka diagramów prawdopodobnie pomoże ci to zobrazować. Margines jest zewnętrznym zbiorem pikseli wokół obiektu. Wewnątrz marginesu znajduje się granica. Wewnątrz granicy znajduje się wyściółka, a wewnątrz wyściółki jest zawartość. Tak więc margines to liczba pikseli wokół obiektu znajdującego się poza obramowaniem, a dopełnienie to liczba pikseli między obramowaniem a treścią obiektu.
Jeśli nie określono granicy, marginesy i dopełnienie zapewniają bardzo podobne efekty, z wyjątkiem tego, że marginesy sąsiednich obiektów są czasami zwinięte (np. Połączone w pojedynczy margines), ale dopełnienie nie jest nigdy łączone w ten sposób, a tło rozciąga się do granicy , ale nie pod marginesem.
Oto StackOverflow pytanie/odbieranie połączeń marż vs. wyściółka zapewniająca kilka innych przydatnych nazwy: When to use margin vs padding in CSS
Oto dobry article o modelu pudełkowego CSS, który obejmuje margines i padding
Dzięki, odpowiedziałem, co dokładnie myślałem. – user2288945
@ user2288945 - Dodałem trochę więcej do mojej odpowiedzi na temat marginesu w porównaniu do dopełnienia. – jfriend00
W skrócie, marginesy dodaj przestrzeń wokół pola elementu i zmodyfikuj ilość miejsca zarezerwowanego dla niego w przepływie strony do dopasowania. Tak więc górny margines przesuwa blok w dół, a jednocześnie przesuwa całą zawartość, która następuje po nim. Dolny margines przenosi zawartość, która podąża za nią, pozostawiając sam blok w tym samym miejscu. To bardzo intuicyjne i prawdopodobnie zachowuje się dokładnie tak, jak można się spodziewać.
Pozycjonowanie względne robi coś dziwnego: zmienia się, gdy blok jest wyciągnąć, ale nie tam, gdzie przestrzeń zarezerwowana na to. Jeśli więc użyjesz pozycjonowania względnego i ustawisz top na 10px, pole zostanie przesunięte o 10px w dół strony - ale zawartość po nim nie zostanie przeniesiona. To może spowodować, że pole będzie się pokrywać z treścią, która za nim podąża.
Jeśli naprawdę chcesz uzyskać dziwny efekt (i zobaczyć względne pozycjonowanie w akcji), zastosuj zarówno unoszące się: lewe i względne pozycjonowanie do małego bloku. Blok zostanie przeniesiony, ale zarezerwowany dla niego obszar pozostanie w pierwotnym miejscu.
zrobiłem dla was przykładem:
<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)
Kto mówi, że jesteś powinien używać pozycję? Poza tym, 'top' jest ignorowane dla elementów statycznie pozycjonowanych, więc nie jestem pewien, czy twoje założenie jest prawidłowe. – harpo