CSS relaterad positionering
- Föregående sida Översikt över CSS positionering
- Nästa sida CSS absolut positionering
En elementram som är satt till relaterad position kommer att flyttas en viss avstånd. Elementet behåller sin ursprungliga form och det utrymme det ursprungligen tog upp behålls.
CSS relaterad positionering
Relaterad position är ett mycket enkelt koncept att förstå. När ett element positioneras relativt, visas det på sin plats. Därefter kan man justera den vertikala eller horisontella positionen så att elementet 'relativt' flyttas från sin startpunkt.
Om top sätts till 20px, kommer rutan att vara 20 pixlar nedanför den ursprungliga positionen. Om left sätts till 30 pixlar, skapas det ett utrymme på 30 pixlar till vänster om elementet, vilket innebär att elementet flyttas till höger.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Som visas i följande bild:
Observera att när man använder relaterad position, tar elementet fortfarande upp sitt ursprungliga utrymme, oavsett om det flyttas eller inte. Därför kan flyttning av elementet leda till att det täcker andra rutor.
CSS relaterad positionsexempel
- Position: Relaterad position
- Detta exempel visar hur man positionerar ett element relativt till dess normala plats.
- Föregående sida Översikt över CSS positionering
- Nästa sida CSS absolut positionering
