Ez a rész valamiért teljesen kimaradt a korábbi HTML+CSS videókból, úgyhogy most megnézzük mi a különbség a static, absolute, relative és fixed pozicionálás között.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


<html>
<head>
	<title>CSS</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<script src="jquery.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<header>fejléc</header>
	<section>
		<article>
			<div class="image">
				<span class="sale">-20%</span>
				<span class="icon-star"></span>
				<a href=""><img src="1.png" alt=""></a>
			</div>
			<h2><a href="">LG G3 D855 16GB Mobiltelefon</a></h2>
			<p>150 000 Ft</p>
			<button>kosárba <span class="icon-cart"></span></button>
		</article>
	</section>
</body>
</html>

CSS forráskód


@font-face {
	font-family: 'fontello';
	src: url('font/fontello.eot?83039761');
	src: url('font/fontello.eot?83039761#iefix') format('embedded-opentype'), url('font/fontello.woff?83039761') format('woff'), url('font/fontello.ttf?83039761') format('truetype'), url('font/fontello.svg?83039761#fontello') format('svg')
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	display: inline-block
}
.icon-star:before { content: '\e800' }
.icon-cart:before { content: '\e801' }
*  {
	padding:0;
	margin:0;
	border:0;
	outline:none;
	font-family:arial;
	font-size:14px
}
a {
	text-decoration:none;
	color: #0d9ac7
}
section {
	margin: 100px auto 1000px auto;
	width: 200px
}
article {
	background: #f4f4f4;
	border: 1px solid #ddd;
	text-align: center;
	padding: 10px
}
button {
	background: #0d9ac7;
	color: #fff;
	padding: 5px 15px;
	font-size: 18px;
	cursor: pointer;
	margin-top: 10px
}
button:hover { background: #0b7ea2 }
button .icon-cart {
	margin-left: 5px;
	font-size: 20px
}
p {
	font-weight: bold;
}
h2 {
	margin: 10px 0;
	font-weight: normal
}
.image {
	background: #fff;
	padding: 10px;
	position: relative
}
.image span {
	position: absolute
}
.image .icon-star {
	top: 10px;
	left: 10px;
	font-size: 20px;
	color: lightgrey;
	display: none;
	cursor: pointer
}
.image:hover .icon-star,
.icon-star.active {
	display: inline-block
}
.icon-star.active {
	color: orange;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2)
}
.image .sale {
	background: green;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	padding: 3px 10px;
	bottom: 10px;
	right: 10px
}
header {
	background: #0d9ac7;
	color: #fff;
	text-align: center;
	padding: 10px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100
}

jQuery forráskód


$(document).ready(function() {
	$(".icon-star").click(function(){
		$(this).toggleClass("active");
	});
});