Pirmais pozīcija: statiskā
Noklusējuma pozicionēšana visi elementi pozīciju: statiska, kas nozīmē, ka elements nav novietots, un tad, ja tās izmanto, lai būtu dokumentā.
Parasti, jums nevajadzētu noteikt šo, ja jūs vēlaties, lai ignorētu pozicionēšanu, kas bija iepriekš instalēta.
#div-1 {
position:static;
}
Otrais pozīcija: radinieku
Ja jūs norādiet vietu: relatīva, tad jūs varat izmantot augšu vai apakšu, un pa kreisi vai pa labi, lai pārvietotu objektu, attiecībā uz kuriem tai ir tendence rasties dokumentā.
Pāriesim DIV-1 uz 20 pikseļiem un 40 pikseļi līdz kreisās:
#div-1 {
position:relative;
top:20px;
left:-40px;
}
Pievērsiet uzmanību uz vietu, kur Div-1 parasti būtu bijis, ja mēs nebūtu pārvietots viņai, tagad tas ir tukša vieta. Nākamais elements (div-pēc) nepakustējās, kad mēs pārvietots Div-1. Tas ir tāpēc, Div-1 joprojām ieņem šo sākotnējo vietu dokumentā, lai gan mums ir rokā.
Šķiet, ka pozīcija: radinieku nav ļoti noderīgs, bet tas būs svarīgs uzdevums vēlāk šajā rokasgrāmatā.
Trešais pozīcija: absolūtais
Ja jums parādīt pozīciju: absolūts, prece tiek izņemta no dokumenta un novieto tieši tur, kur jums pateikt to, lai iet.
Pāriesim DIV-1a, augšējā labajā stūrī:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Lūdzu, ņemiet vērā, ka šajā laikā, jo Div-1a ir izņemta no dokumenta, un citi elementi uz lapas ir novietoti dažādos veidos: Div-1b, Div-1C, un <pēc pieauga no DIV-1a nebija.
Tāpat ņemiet vērā, ka DIV-1a tika ievietots augšējā labajā stūrī. Nu, lai varētu novietot lietas uz pašas lapas, bet tā ir ierobežota vērtība.
Ko es tiešām gribu, lai novietotu Div-1a ar Div-1. Un šeit ir vieta, kur relatīvais stāvoklis atgriežas uz spēli.
Piezīmes
- Ir jo pārlūkā IE Windows kļūda: ja jums parādīt relatīvo platumu (piemēram, „Platums: 50%“), platums būs balstīta uz mātes, ne pozicionēšanas elements.
Ceturtais pozīcija: radinieku + amats: absolūtas
Ja mēs noteikti relatīvo pozicionēšanu uz Div-1, jebkādām DIV-1 elementi tiks atrodas uz Div-1. Tad, kad mēs noteikti absolūto pozīciju uz Div-1a, mēs varam pārvietot to uz augšējā labajā stūrī no Div-1:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Piektais 2 kolonnas absolūtā
Mēs varam veikt divus modeļus ar relatīvā un absolūtā pozicionēšana!
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Viena priekšrocība, izmantojot absolūtu pozicionēšanu, ka mēs varam pozicionēt elementus jebkurā secībā lapā, neatkarīgi no rīkojuma tie parādās HTML. Tāpēc man DIV-1B uz Div-1a.
Bet pagaidiet – kas notika ar citiem elementiem? Viņi pašlaik paliek ēnā absolūti novieto elementiem. Ko mēs varam darīt?
Sestais 2 kolonnu augstums
Viens no risinājumiem ir noteikt fiksētu augstumu par elementiem.
Bet tas nav pieņemami vairumam projektu, jo parasti mēs nezinām, cik daudz teksta būs elementiem, vai precīza izmēru fontu lietot.
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Septītais Pludiņi
Par kolonnām uz dažāda augstuma, absolūtais pozicionēšanas nedarbojas, tāpēc pieņemsim nākt klajā ar citu risinājumu.
Mēs varam „peldēt“ elements tērēt pēc iespējas mazāk pa labi vai pa kreisi, un teksts tiks aplauzts ap to. To parasti lieto, lai attēlus, bet mēs to izmantosim vairāk sarežģītu uzdevumu, izkārtojuma (jo tas ir vienīgais līdzeklis, kas mums ir.)
#div-1a {
float:left;
width:200px;
}
Astotais Pludiņi sleja
Kad mēs bura vienu kolonnu pa kreisi, bet otrajā ailē peldēt bloku pa kreisi, viņi push pret otru.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
Devītais Pludiņi kolonnas ar skaidru
Tad, pēc peldošās elementi var tikt „noskaidroti“ preses saturu atpūtas izlec.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
Desmitais Atbildība un resursi
Šie piemēri ir ļoti vienkārša un nav izraisīt dažas kļūdas CSS IE pārlūku Windows (ieskaitot tur ir daudz).
Nākamajā lappusē ir bijis nenovērtējams:
Absolūtā
Lai gan jūs tur pārbaudīt šādi:
Vai šī apmācība būs iemācīt jums kaut ko jaunu? Ja tā, nopirkt man alus!