Absolute posisie, kan iemand dit verklaar

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

Vra

Hier is 'n uittreksel van CSS wat ek nodig het verduidelik: 

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Ok so dit is absolute posisionering van 'n beeld, natuurlik.

  1. top is soos padding van die top, reg?
  2. Wat beteken links 50% doen?
  3. waarom is die linkerkantse kantlyn aan -445px?

Update: breedte is 860px. Die werklike beeld is 100x100 as wat 'n verskil maak ??

Was dit nuttig?

Oplossing

  1. Top is die afstand vanaf die top van die html element of as dit 'binne 'n ander element met absolute posisie, van die top van dat.

  2. & 3. Dit hang af van die breedte van die beeld, maar dit kan wees vir horisontaal sentrering die beeld (as die wydte van die beeld is 890px). Daar is ander maniere om die sentrum 'n beeld horisontaal though. Meer algemeen, hierdie is gebruik om 'n blok van bekende hoogte vertikaal (dit is die maklikste manier om iets van bekende hoogte vertikaal senter) SENTRUM: 

    top: 50%
margin-top: -(height/2)px;

Ander wenke

Dit is waarskynlik gedoen om die element sentrum op die bladsy (met behulp van die "dooiepunt" tegniek).

Dit werk soos volg: Veronderstel die element is 890px wye, dit is ingestel op position:absolute en left:50%, wat in die sentrum sy linker rand plaas van die leser ( goed, dit kan die sentrum van 'n ander element met position:relative) wees.

Toe die negatiewe marge word gebruik om beweeg die linkerhand rand aan die linkerkant 'n afstand gelyk aan half breedte van die element se , dus sentreer dit.

natuurlik, dit kan nie dit presies sentrering (dit hang af hoe groot die element eintlik is, is daar geen width in die kode wat jy geplak, so dit is onmoontlik om seker te wees), maar dit is beslis die plasing van die element met betrekking tot die sentrum van die bladsy

  

top is soos padding van die top reg?

Ja, die top van die bladsy.

  

wat beteken links 50% doen?

Dit beweeg die inhoud van die middel van die skerm (100% sal al die pad na die reg wees.)

  

waarom is die linkerkantse kantlyn aan -445px?

Na beweeg dit met "links: 50%". Dit beweeg dit 445 pixels terug na links

Die brokkie bo betrekking het op 'n element met 'n ID-artikel (a div, span, beeld of andersins kan wees).

Die element het 'n agtergrond beeld van blah.png wat sal herhaal in beide x en y rigtings.

Die boonste rand van die element sal geposisioneer 0px (of enige ander eenhede) van die top van dit is ouer element as die ouer is ook absoluut geposisioneer. As die ouer is die venster, sal dit wees in die boonste rand van die venster.

Die element sal wees dit linkerkant geposisioneer 50% van die linkerkant van dit linkerkant ouer element se.

Die element sal dan "verskuif" 445px links uit dat 50% punt.

Jy sal alles wat jy nodig het om te weet uit te vind deur te lees op die CSS boks model

Wanneer posisie is absolute, top is vertikale afstand van die ouer (waarskynlik die liggaam tag, so 0 is die boonste rand van die venster). Links 50% is afstand vanaf die linkerkant. Die negatiewe marge beweeg dit terug links 445px. Oor hoekom, jou raaiskoot is so goed soos myne.

By die risiko van klink soos Captain Obvious, sal ek probeer verduidelik dit so eenvoudig as moontlik te maak.

Top is 'n getal wat die aantal pixels jy wil hê dit moet wees van die top van alles wat html element is bo dit bepaal ... so nie noodwendig die top van jou bladsy. Wees versigtig vir jou html opmaak as jy jou css ontwerp.

Jou links na 50% moet dit skuif na die sentrum van jou skerm, gegee dat dit 50. Hou in gedagte mense het verskillende skerm groottes en word toegeken aan die (0,0) links bo van jou beeld, nie die sentrum van die beeld, so dit sal nie perfek toegeken aan die sentrum van 'n mens se skerm soos jy dit aan te wagte kan wees.

Dit is waarom die kantlyn links na -445 pixels is used-- om dit verder oor te skuif, vasgestel.

Sterkte, ek hoop dat hierdie sin gemaak. Ek is anders probeer woord my verduideliking in geval ander antwoorde is nog gee jou 'n harde tyd. Hulle was groot antwoorde sowel.

(As jy twee verskillende grootte skerms, ek stel voor toi rondom die met die kode om te sien hoe elke verandering beïnvloed verskillende grootte skerms!)

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top