Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

position 연습2 본문

웹퍼블리싱/CSS

position 연습2

http://portfolio.wonpaper.net 2018. 11. 22. 02:06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css position 연습05</title>

<style type="text/css">
 div {border:1px solid red;width:100px;height:30px;}
  /* postion:relative --> 원래 컴퓨터가 위치를 계산해준 자리로 이동(left,top,right,bottom)*/
  /* left:50px 원래 자리에서 50px 만큼 이동된다. - 값 주면 왼쪽으로 이동한다. */ 
 #d2 {position:relative;left:50px;top:30px;} 
 /***********/
 #d3p {position:relative;overflow:hidden;}         /* 이 부모영역을 벗어나는 자식놈은 hidden 된다 */
   #d3 {position:absolute;left:50px;top:30px;}    

  /* #d3 absolute 의 기준점은  부모중에 relative 가 있으면 이를 기준점으로 잡힌다.*/
</style>
</head>
<body>

<div id="d1">111</div>
<div id="d2">222 position:relative;</div>
 <div id="d3p">
  <div id="d3">333 position:absolute;</div>
 </div>
 <div id="d4">444</div>


</body>
</html>

 

#d3p overflow:hidden 삭제시

 

 

#d3p overflow:hidden 적용시

 

 

 

위의 내용중 핵심은 2가지이다.

 

1. absolute 의 기준점은 웹브라우저의 0x0 이 아니고, 그 부모중에  relative가 있으면 이를 기준점으로 한다는 점이다.

2. #d3p 의 overflow:hidden 은 이영역을 벗어나는 놈은 화면에서 hidden 시킨다.

 

 

 

 

 

'웹퍼블리싱 > CSS' 카테고리의 다른 글

font 연동하기  (0) 2018.11.25
div 태그를 스크롤되게 하자  (0) 2018.11.24
position 연습1  (0) 2018.11.22
float 연습 3  (0) 2018.11.19
float 연습 2  (0) 2018.11.19
'웹퍼블리싱/CSS' Related Articles more
Comments