---
title: "Relativt positionerade element och tomrummet de lämnar efter sig."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/191943-relativt-positionerade-element-och-tomrummet-de-lämnar-efter-sig"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "prplxr"
published: "2014-01-08T13:37:10.000Z"
updated: "2014-01-08T13:46:39.000Z"
replies: 2
views: 651
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/191943-relativt-positionerade-element-och-tomrummet-de-lämnar-efter-sig"
---

# Relativt positionerade element och tomrummet de lämnar efter sig.

## #1 — prplxr, 2014-01-08T13:37Z

Nu har jag kört fast på något som kan verka som en larvig grej att fastna på.

Jag bygger ett ratingsystem, a la "fem-stjärnor-varianten". Jag vill kunna visa mer precist än bara "hela stjärnor" som snittpoäng så jag har satt ihop två bilder bestående av fem stjärnor på rad, en med grå och en med gula stjärnor. Jag använder sedan dessa som bakgrundsbild i varsin div, den grå under den gula. Jag justerar sedan bredden på diven med gula stjärnor.

Diven med gula stjärnor är relativt positionerad över den med grå stjärnor. Ovanpå detta har jag ytterligare en div med transparenta bilder som skiftar bakgrund (stjärnor, gula upp till och med den man pekar på, resten gråa) när man pekar på dem.

Pretty straight forward. Som många andra system fungerar.

Problemet med detta är att när jag flyttar runt på divar så finns fortfarande utrymmet de först låg på reserverat och "tar upp plats". Detta behöver jag få bukt med och jag vet verkligen inte hur. Frågan är alltså hur jag "får bort" tomrummet divarna lämnar efter sig.

Bifogar kodan här nedan och har även lagt upp det så att ni kan se på <http://beta.audioparadyne.se/sb/rate/>.

Jag lade även till en border på diven allt ligger i för att man lättare ska se vad jag menar.

```
<?php

	$pts = 17;
	$vts = 5;
	
	$size = 20;
	$twidth = $size * 5;
	
	$rating = round($pts/$vts, 2);
	
	echo "totalt: {$pts}<br />röster: {$vts}<br />snitt: {$rating}<br /><br />";
	
?>

<script type="text/javascript">

	function hoverStars(ident) {
		if(ident == 0) {
			document.getElementById('s1').style.backgroundImage = 'none';
			document.getElementById('s2').style.backgroundImage = 'none';
			document.getElementById('s3').style.backgroundImage = 'none';
			document.getElementById('s4').style.backgroundImage = 'none';
			document.getElementById('s5').style.backgroundImage = 'none';
		} else {
			for(i = 1; i <= 5; i++) {
				if(i <= ident) {
					document.getElementById('s'+i).style.backgroundImage = 'url(stars_yellow.png)';
				} else {
					document.getElementById('s'+i).style.backgroundImage = 'url(stars_gray.png)';
				};
			};
		};
	};

</script>

<div style="width: <?php echo $twidth; ?>px; border: 1px solid black;">
	
	<div style="z-index: 10; height: <?php echo $size; ?>px; width: <?php echo $twidth; ?>px; background-image: url('stars_gray.png');"></div>
		
	<div style="z-index: 20; position: relative; top: -<?php echo $size; ?>px; height: <?php echo $size; ?>px; width: <?php echo round($rating/5*$twidth) ?>px; background-image: url('stars_yellow.png');"></div>
	
	<div style="z-index: 30; position: relative; top: -<?php echo $size*2; ?>px; width: <?php echo $twidth; ?>px; height: <?php echo $size; ?>px;">
	
		<a href="#"><img id="s1" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(1);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s2" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(2);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s3" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(3);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s4" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(4);" onmouseout="hoverStars(0);" /></a><a href="#"><img id="s5" src="trans.png" style="width: <?php echo $size; ?>px; height: <?php echo $size; ?>px; background-image: none;" onmouseover="hoverStars(5);" onmouseout="hoverStars(0);" /></a>
	
	</div>
	
</div>
```

Permalänk: https://www.webforum.nu/p/191943

## #2 — voigtann1, 2014-01-08T13:42Z

sätt ett element runt alla och sätt position: relative på den.

Permalänk: https://www.webforum.nu/p/2315114

## #3 — prplxr, 2014-01-08T13:46Z

Helt guld! Fick lov att sätta höjd på det elementet också så fungerade det klockrent!

Tack, voigtann1! :-D

Permalänk: https://www.webforum.nu/p/2315115

---

Tråden på webben: https://www.webforum.nu/amne/html-css/191943-relativt-positionerade-element-och-tomrummet-de-lämnar-efter-sig