CSS定位可以幫助我們實現(xiàn)許多有趣的效果，比如撲克牌的布局。

.card {
position: absolute;
width: 70px;
height: 100px;
border: 1px solid #000;
}
.spades, .clubs {
color: #000;
}
.hearts, .diamonds {
color: #e00;
}
.spades::before, .spades::after,
.clubs::before, .clubs::after,
.hearts::before, .hearts::after,
.diamonds::before, .diamonds::after {
content: " ";
position: absolute;
background-color: #000;
}
.spades::before, .clubs::before,
.hearts::before, .diamonds::before {
width: 20px;
height: 20px;
border-radius: 50%;
}
.spades::after, .clubs::after,
.hearts::after, .diamonds::after {
width: 10px;
height: 10px;
border-radius: 50%;
}
.spades::before {
top: 10px;
left: 25px;
}
.spades::after {
top: 20px;
left: 30px;
}
.clubs::before {
top: 10px;
left: 25px;
}
.clubs::after {
top: 20px;
left: 30px;
}
.hearts::before, .hearts::after {
background-color: #e00;
}
.hearts::before {
top: 10px;
left: 25px;
transform: rotate(45deg);
}
.hearts::after {
top: 10px;
left: 40px;
transform: rotate(-45deg);
}
.diamonds::before, .diamonds::after {
background-color: #e00;
}
.diamonds::before {
top: 10px;
left: 25px;
transform: rotate(45deg);
}
.diamonds::after {
top: 30px;
left: 40px;
transform: rotate(-45deg);
}

以上是一個簡單的撲克牌的布局代碼示例，通過定位和偽元素的運用，我們可以實現(xiàn)各種有趣的效果。