728x90
반응형
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
right: 50px;
top : 50px;
position: absolute;
background: red;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
/*position: relative;*/
background: yellow;
}
#animate {
width: 50px;
height: 50px;
right: 50px;
top : 50px;
position: absolute;
background: red;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>
출처: https://www.w3schools.com/
추가로 참고하면 좋은 글: https://rgy0409.tistory.com/2951
※ 주의할 점. absolute 속성은 inline이 아닌 div와 같은 블럭 element에 지정해야 작동함. 버튼에 absolute 지정해도 안먹힘.
absolute속성에서 중앙정렬하기(CSS)
1. 수직과 수평에 대해 중앙정렬
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
2. 수직에 대해 중앙정렬
top: 50%;
transform: translate(-50%);
3. 수평에 대해 중앙정렬
left: 50%;
transform: translate(-50%);
728x90
반응형
'studies > Front-end' 카테고리의 다른 글
| [Flutter] AppBar transparent 투명색으로, Body 위에 겹치기 (0) | 2021.01.24 |
|---|---|
| VsCode 비주얼코드 브라우저 실행 단축키 설정하기 (0) | 2020.04.25 |
| [Javascript] document.write() 함수 사용시 주의 (0) | 2020.03.30 |
| [HTML] 이미지 원본사이즈를 최대한 유지하여 페이지에 맞추기 / 반응형 웹디자인 (0) | 2020.02.15 |
| [HTML/Javascript] Iframe 활용 (0) | 2020.02.15 |
