|
|
Opublikowano 30.10.2014 14:39:28
|
|
|
Ustawienie tej wartości na absolutną wyciągnie obiekt z normalnego absolutnego pozycjonowania przepływu dokumentów, niezależnie od układu treści wokół niego. Jeśli inne obiekty o różnych właściwościach indeksu z zajmują już daną pozycję, nie będą na siebie wpływać, lecz będą się nakładać na tę samą pozycję. Obiekt nie ma zewnętrznej łaty (marginesu), ale nadal posiada wewnętrzną łatkę (patding) i ramkę (ramkę).
Aby aktywować absolutne pozycjonowanie obiektu, musisz określić co najmniej jeden z atrybutów lewej, prawej, górnej, dolnej i ustawić tę wartość na absolutną. W przeciwnym razie powyższe atrybuty automatycznie będą używać wartości domyślnej, co spowoduje, że obiekt będzie podążał za normalnymi regułami układu HTML i będzie renderowany zaraz po poprzednim obiekcie.
Atrybuty TRBL (GÓRA, PRAWA, DOLNA, LEWA) są ważne tylko wtedy, gdy atrybut pozycji jest ustawiony.
Powinieneś ustawić position:absolute
Jeśli nadrzędny (nieskończony) nie ustawi atrybutu pozycji, to aktualny absolut jest umieszczany w połączeniu z atrybutem TRBL w lewym górnym rogu przeglądarki jako punkt pierwotny
Jeśli rodzic (nieskończony) ustawia właściwość pozycji, to aktualny absolut jest umieszczany w połączeniu z własnością TRBL w lewym górnym rogu rodzica (niedawnego) jako punkt oryginalny.
Przy ustawianiu pozycji: względna
Lewy górny róg nadrzędnego (najnowszego) obszaru treści to oryginalny punkt połączony z atrybutem TRBL (lub przesunięcie względem poprzedniego elementu elementu pozycjonowanego w obszarze nadrzędnej), a lewy górny róg BODY to punkt oryginalny bez nadrzędnego. Względne położenie nie może być warstwowe. Przy użyciu względnego położenia element nadal zajmuje swoją pierwotną przestrzeń, niezależnie od tego, czy jest przesuwany, czy nie. W związku z tym przesuwanie elementu powoduje nadpisywanie innych ramek.
Ogólnie rzecz biorąc, jeśli strona jest wyśrodkowana, łatwo jest popełnić błędy przy użyciu Absolute, ponieważ strona zawsze automatycznie dostosowuje się do rozmiaru rozdzielczości, podczas gdy Absolute używa górnego lewego rogu przeglądarki jako punktu oryginalnego i nie zmienia pozycji ze względu na zmianę rozdzielczości. Czasami konieczne jest także poleganie na indeksie z, aby ustalić relację między górną a dolną częścią pojemnika: im większa wartość, tym wyższa góra, a zakres liczbowy jest liczbą naturalną. Oczywiście warto zauważyć, że relacja rodzic-dziecko nie może być ustawiona za pomocą indeksu z, a poziom dziecka musi być powyżej i poniżej rodzica.
Ustawienie tej wartości właściwości względnej utrzymuje obiekt w normalnym przepływie HTML, ale jego pozycja może być przesunięta względem poprzedniego obiektu. Tekst lub obiekty podążające za względem względnego lokalizatora zajmują własną przestrzeń, nie pokrywając naturalnej przestrzeni obiektu, w którym jest umieszczony. Natomiast tekst lub obiekt po obiekcie pozycjonowania absolutnego zajmuje swoją naturalną przestrzeń, zanim obiekt docelowy zostanie przeciągnięty poza normalny przepływ dokumentu. Umieszczenie obiektu pozycjonującego absolutnie poza widokiem powoduje pojawienie się paska przewijania. Umieszczenie obiektu pozycjonującego względem względnego poza obszarem widzenia nie pojawia się za pomocą paska przewijania. W rzeczywistości głównym problemem z pozycjonowaniem jest zapamiętanie znaczenia każdej z tych pozycji. Pozycjonowanie względne to początkowa pozycja elementu "względem do" przepływu dokumentu, natomiast pozycjonowanie absolutne to element przodka, który został umieszczony "względem stosunku" do najnowszego.
Oto dodatki:
Chociaż znam absolutne pozycjonowanie (absolutne) i względne pozycjonowanie CSS, nigdy nie pisałem samemu odpowiednich efektów!
Po ponad pół dnia pracy można uznać ją za kompletną! Odkryłem też niektóre z tych dwóch cech!
Podsumowanie jest następujące:
Przyjrzyjmy się najpierw następującej strukturze warstw
<body>
<div id=posi>
<div id=rel> Ta warstwa stosuje tylko position:relative; Styl </div>
<div id=abs> Ta warstwa stosuje tylko position:absolute; Styl </div>
<div id=sss> nie stosuje <div>stylów
</div>
</body>
1. Absolutny: nie zajmuje miejsca, Relative: ma miejsce!
Na przykład nadbudówka:
Warstwy z id rel zajmują jedną linię podczas wyświetlania! Warstwa ABS za nią pojawi się dopiero w następnej linii!
Gdy warstwa z ID ABS jest wyświetlana, nakłada się na ID SSS z tyłu!
2. Domyślnie (nie w połączeniu z topem itd.), absolutne (pozycjonowanie absolutne) jest pozycjonowane przez warstwę nadrzędną
Na przykład, jeśli powyższa warstwa z ID to ABS, jeśli nie jest ustawiona w połączeniu z TOP, jej pozycja wyświetlana będzie z nadrzędną warstwą POSI (POSI znajduje się w lewym dolnym rogu dokumentu i również w lewym dolnym rogu)
3. Przy łączeniu atrybutów górny, dolny, prawy, lewy i innych, absolutne (pozycjonowanie absolutne) jest pozycjonowane z oknem jako pozycjonowaniem, a względne jest przesunięte o własną obsadzoność jako linię bazową! Jak poniżej:
<body>
<div id=posi>
<div id=sss> nie stosuje <div>stylów
<div id=rel> Ta warstwa stosuje position:relative; Dolny: 30px; Styl </div>
<div id=abs> Ta warstwa stosuje tylko position:absolute; Dolny: 30px; Styl </div>
</div>
</body>
Powyższy kod:
Warstwa z rel id przesuwa się w górę i nakłada warstwę z id SSS
Warstwa z ID ABS zostanie przesunięta na pozycję 30 pikseli od okna, z oknem jako linią bazową!
4. Łącząc atrybuty górne, dolne, prawe, lewe i inne atrybuty, jeśli chcesz, aby absolutne (pozycjonowanie absolutne) było użyte na warstwie nadrzędnej jako linii bazowej pozycjonowania, możesz zastosować atrybuty absolutne lub względne na warstwie nadrzędnej! Jak poniżej:
<body>
<div id=posi style="position:relative">
<div id=rel> Ta warstwa stosuje position:relative; Dolny: 30px; Styl </div>
<div id=abs> Ta warstwa stosuje tylko position:absolute; Dolny: 30px; Styl </div>
</div>
</body>
Powyższy kod: id to warstwa posi, możesz też użyć atrybutu absolutnego!
id to warstwa rel, która nie jest dotknięta i jest przesunięta przez własny zastępczy punkt jako linia bazowa!
Warstwa z id jako ABS opiera się na dolnej krawędzi warstwy POSI jako linii bazowej pozycjonowania; jeśli wysokość warstwy POSI jest obecnie mniejsza niż 30px, warstwa ABS może jej nie zobaczyć!
|
Poprzedni:Uczniowie Wu Ruana, proszę, nie idźcie do "Guangbutun" kupować komputer! Żeby nie dać się oszukać!Następny:Jak usunąć podkreślenie linku hipertekstowego w HTML?
|
