Information

Sajt

22 Hitta rätt positions

Fixa så lådorna med id enligt nedan får stylen som beskrivs.

  • Gör så "box-1" lådan har en "static" posistion.
  • Gör så "box-2" lådan har en "relative" position, med ett top värde på 20px och höger värde på 10px.
  • Gör så "box-3" lådan har en "absolut" position, med ett bottom värde på 30px och höger värde på 20px.
  • Gör så "box-4" lådan har en "fixed" position, med ett bottom värde på 10px och vänster värde på 40px.
  • Gör så "box-5" lådan har en "sticky" position, med ett top värde på 30px och höger värde på 20px.

Kod 


<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<style>
	     #box-1 {
	     }
	     
	     #box-2 {
		 }
	     
	     #box-3 {
	     } 
	     
	     #box-4 {
		 }
		 
		 #box-5 {
		  
	     }
	     
	</style>
	<style>
	     div {
		     background-color: red;
		     border-style: solid;
margin: 10px;
		     font-size: 32px;
width: 40px;
float: left;
		 }
		 #container {
		         background-color: green;
			       width: 400px;
		         height: 200px;
			       left: 15px;
			       border-style: solid;
}
	</style>
</head>
<body>
	<h1> Boxes </h1>
	<div id="container" >
	<div id="box-1" >
	     1 
	</div>
<div id="box-2" >
	     2 
	</div>
	<div id="box-3" >
	     3 
	</div>
	<div id="box-4" >
	     4 
	</div>
	<div id="box-5" >
	     5 
	</div>
</body>
</html>

Du ska bara lägga till något mellan style-tagarna.

Nyheter