position 예제
<style> #hz { border: 1px solid silver; background-color: tomato; width: 300px; height: 200px; position: relative; top: 20px; } </style> <button onclick="homzzang()">클릭t</button> <div id="hz"> <p>홈짱닷컴 Homzzang.com</p> </div> <script> function homzzang() { document.getElementById("hz").style.position = "absolute"; } </script>
<style>
#hz {
border: 1px solid silver;
background-color: tomato;
width: 300px;
height: 200px;
position: relative;
top: 20px;
}
</style>
<button onclick="homzzang()">클릭t</button>
<div id="hz">
<p>홈짱닷컴 Homzzang.com</p>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.position = "absolute";
</script>
position 예제 - 화면 정중앙 배치/정렬
<style>div {width:200px; border:1px solid red;} </div> <div>홈짱닷컴 Homzzang.com</div> <script> var div = document.getElementsByTagName('div'); div[0].style.position = 'absolute'; div[0].style.left = '50%'; div[0].style.top = '50%'; div[0].style.transform = "translate(-50%, -50%)"; </script> 결과보기
<style>div {width:200px; border:1px solid red;}
<div>홈짱닷컴 Homzzang.com</div>
var div = document.getElementsByTagName('div');
div[0].style.position = 'absolute';
div[0].style.left = '50%';
div[0].style.top = '50%';
div[0].style.transform = "translate(-50%, -50%)";
결과보기