Skip to content

Instantly share code, notes, and snippets.

@egoing

egoing/position-lab.html

Last active October 22, 2020 01:16
Show Gist options
  • Save egoing/c0000a708ed7e2c33b6ca4a4342e12b7 to your computer and use it in GitHub Desktop.
Save egoing/c0000a708ed7e2c33b6ca4a4342e12b7 to your computer and use it in GitHub Desktop.
Download ZIP
css position 강의 예제
Raw
position-lab.html
<!-- 실험실 -->
<html>
<head>
<style>
body {
margin: 0;
}
div {
border: 5px solid black;
padding: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div>Hello</div>
<div>Hello
<div>Hello
<div>Hello</div>
<div>static</div>
<div style="
border: 5px solid red;
background-color:rgba(255,0,0,0.5);
">relative</div>
<div style="
border: 5px solid green;
background-color:rgba(0,255,0,0.5);
text-align:center;
">absolute</div>
<div style="
border-color: blue;
background-color:rgba(0,0,255,0.5);
text-align:right;
">fixed</div>
<div>Hello</div>
</div>
</div>
<div>Hello</div>
</body>
</html>
Raw
position-result.html
<!-- 실험 결과 -->
<html><head>
<style>
body {
margin: 0;
}
div {
border: 5px solid black;
padding: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div>Hello</div>
<div style="
position: relative;
">Hello
<div style="
position: relative;
top: 10px;
">Hello
<div>Hello</div>
<div style="position: static;left: 20px;">static</div>
<div style="
border: 5px solid red;
background-color:rgba(255,0,0,0.5);
position: relative;
left: 20px;
top: 20px;
">relative</div>
<div style="
border: 5px solid green;
background-color:rgba(0,255,0,0.5);
text-align:center;
position: absolute;
left: 0;
top: 0;
">absolute</div>
<div style="
border-color: blue;
background-color:rgba(0,0,255,0.5);
text-align:right;
position: fixed;
top: 0;
left: 0;
">fixed</div>
<div>Hello</div>
</div>
</div>
<div style="
height: 1103px;
">Hello</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment