Skip to content

Instantly share code, notes, and snippets.

@fResult

fResult/index.html

Last active July 28, 2020 11:19
Show Gist options
  • Save fResult/fb65eea92f7db904c676515ad15fac1e to your computer and use it in GitHub Desktop.
Save fResult/fb65eea92f7db904c676515ad15fac1e to your computer and use it in GitHub Desktop.
Download ZIP
CSS Positioning
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
margin-top: 150px;
padding: 20px;
background: crimson;
width: 500px;
}
div[class*="block-"] {
width: 100%;
text-align: center;
height: 40px;
}
p {
margin: 0
}
.block-1 {
background: palegreen;
}
.block-2 {
background: powderblue;
position: static;
}
.block-3 {
background: lightpink;
}
.block-4 {
background: turquoise;
}
.block-5 {
background: yellowgreen;
}
.block-6 {
background: dodgerblue;
}
.block-7 {
background: rebeccapurple;
}
</style>
</head>
<body>
<h1>CSS Position</h1>
<div class="container">
<div class="block-1">
<p>Block 1</p>
</div>
<div class="block-2">
<p>Block 2</p>
</div>
<div class="block-3">
<p>Block 3</p>
</div>
<div class="block-4">
<p>Block 4</p>
</div>
<div class="block-5">
<p>Block 5</p>
</div>
<div class="block-6">
<p>Block 6</p>
</div>
<div class="block-7">
<p>Block 7</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment