Kursplan

Avancerade CSS-tutorials

• CSS extra book
• CSS introduction
• CSS basic syntax
• CSS advanced syntax
• CSS derived selector
• CSS id selector
• CSS class selector
• CSS creation
• CSS background
• CSS text
• CSS font
• CSS list

CSS-rutmodellen

• CSS box model overview
• CSS padding
• CSS border
• CSS margin
• CSS margin collapse

CSS positionering

• CSS positioning overview
• CSS relative positioning
• CSS absolute positioning
• CSS float

CSS-selektorer

• CSS element selector
• CSS selector grouping
• CSS class selector in detail
• CSS ID selector in detail
• CSS attribute selector in detail
• CSS descendant selector
• CSS child element selector
• CSS adjacent sibling selector

Valfria kurser

Kursrekommendation:

• CodeW3C.com treasure box

CSS positioneringsattributet (Positioning) tillåter dig att positionera element.

CSS positionering och flytande

CSS tillhandahåller några egenskaper för positionering och flytande, med hjälp av vilka man kan skapa en kolumnlayout, överlappa en del av layouten med en annan del och också slutföra uppgifter som tidigare ofta krävde flera tabeller.

Grunden för positionering är mycket enkel, den tillåter dig att definiera var elementets ram bör visas i förhållande till dess normala plats, eller i förhållande till föräldrelementet, ett annat element eller till och med webbläsarens fönster. Det är uppenbart att denna funktion är mycket kraftfull och också mycket förvånande. För att veta, användaragentens stöd för positionering i CSS2 är mycket bättre än stödet för andra aspekter, vilket inte bör vara förvånande.

Å andra sidan föreslogs flytande för första gången i CSS1, baserat på en funktion som Netscape lade till i tidiga skeden av Web-utvecklingen. Flytande är inte helt en positionering, men det är naturligtvis inte en normal strömförläggning. Vi kommer att klargöra innebörden av flytande i efterföljande kapitel.

Allt är rutor

Element som div, h1 eller p kallas ofta för blockelement. Detta innebär att dessa element visas somEn innehållsbitdvs. "blockram". Till motsatsen kallas element som span och strong för "inlineelement", eftersom deras innehåll visas på raden, dvs. "inlinebox".

Du kan använda DisplayegenskapenÄndra typen av genererade rutor. Detta innebär att genom att sätta displayegenskapen till block kan inlineelement (t.ex. <a>-element) uppträda som blockelement. Det är också möjligt att sätta display till none, så att den genererade elementet inte har någon ram. På detta sätt visas ramen och all dess innehåll inte och använder inte utrymme i dokumentet.

Men i ett fall skapas en blockinmatning även om ingen explicit definition har gjorts. Detta inträffar när text läggs till i början av en blockinmatning (t.ex. div). Även om texten inte definieras som en paragraf behandlas den som en sådan:

<div>
mer text
<p>Mer text.</p>
</div>

I detta fall kallas ramen för en namnlös blockram eftersom den inte är kopplad till specifikt definierade element.

Textraderna för blockelement uppvisar liknande beteende. Anta att det finns en paragraf som innehåller tre rader text. Varje textrad bildar en namnlös ram. Det är inte möjligt att tillämpa stil på namnlösa block eller rader, eftersom det inte finns något ställe att tillämpa stil på (observera att radram och inlinebox är två olika koncept). Detta hjälper dock till att förstå att allt som visas på skärmen bildar någon form av ram.

CSS-positioneringsmekanism

CSS har tre grundläggande positioneringsmekanismer: den vanliga strömmen, flytande och absolut positionering.

Om inte särskilt specificerat, placeras alla rutor i den vanliga strömmen. Det innebär att elementens plats i den vanliga strömmen bestäms av deras plats i (X)HTML.

Blokramar placeras en efter en från topp till botten, och den vertikala avståndet mellan ramarna beräknas från deras vertikala marginaler.

Inlineboxar placeras horisontellt på en rad. De kan justeras i avståndet med hjälp av horisontell inre marginal, kant och marginal. Men vertikal inre marginal, kant och marginal påverkar inte höjden på inlineboxen. Horisontella ramar som bildas av en rad kallasRadruta (Line Box)高度始终足以容纳其包含的所有行内框。不过，设置行高可以增加这个框的高度。

I de följande kapitlen kommer vi att förklara i detalj relaterad positionering, absolut positionering och flytande.

CSS position property

Genom att använda PositionsegenskapenVi kan välja 4 olika typer av positionering, vilket påverkar sättet som elementramen genereras.

Innehållet för positionens egenskap:

static

Elementrutor genereras normalt. Blokselement genererar en rektangulär ram som en del av dokumentflödet, medan inlineelement skapar en eller flera rader som placeras i deras föräldrelement.

relative

Elementramen flyttas en viss avstånd. Elementet behåller sin ursprungliga form och det utrymme det ursprungligen tog upp behålls.

absolute

Elementramen tas helt bort från dokumentströmmen och positioneras relativt till dess innehåll. Innehållet kan vara en annan element i dokumentet eller den ursprungliga innehållsramen. Detta element tar upp den plats som det ursprungligen hade i den normala dokumentströmmen, som om det inte hade funnits från början. Efter positionering skapas en blockinram, oavsett vilken typ av ram den ursprungligen skulle ha skapat i den normala strömmen.

fast

Elementramen uppträder liknande när position sätts till absolute, men dess innehåll är fönstret självt.

Tips:Relativ positionering ses faktiskt som en del av den vanliga strömmen positioneringsmodellen, eftersom elementets position är relativ till dess plats i den vanliga strömmen.

CSS positioning attributes

CSS positioning attributes allow you to position elements.

Toolbox

CSS reference manual

CSS example

CSS quiz

CSS tutorial

Sponsor links