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 의 relative , absolute 연습 본문

웹퍼블리싱/CSS

position 의 relative , absolute 연습

http://portfolio.wonpaper.net 2019. 5. 13. 16:02

position 의 relative 상대경로 속성, absolute 절대경로 속성을 연습해 보자.

보통은 이 두가지가 유기적으로 함께 쓰인다.

상위 태그에 relative 로 상대경로를 잡고 그 하위 태그에서 absolute 절대경로를 잡으면,

브라우져 크기에 상관없이 내가 원하는 부분에 특정 내용을 나타낼 수가 있다.

 

 

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position 연습</title>
<style>
    .box {width:400px; height:400px; background-color:#ff0;position:relative;}
    .box > div {background-color:#f00;width:100px;height:100px;border-radius: 50%;position:absolute;}
    .box1 {left:0;top:0;}
    .box2 {right:0;top:0;}
    .box3 {right:0;bottom:0;}
    .box4 {left:0;bottom:0;}
    .box5 {left:50%;top:50%;margin-left:-50px;margin-top:-50px;}
</style>
</head>
 
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>        
        <div class="box3">3</div>        
        <div class="box4">4</div>
        <div class="box5">5</div>        
    </div>
    
</body>
</html>
 
  

 

 

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

사진 롤오버 선택시 약간 커지는 애니메이션 효과주기  (0) 2019.12.08
display 의 table-row 속성  (0) 2019.05.27
해상도 크기에 관계없이 배경이미지 깔기  (0) 2019.02.13
토클 스위치 만들기 toggle switch  (0) 2019.01.29
font 연동하기  (0) 2018.11.25
'웹퍼블리싱/CSS' Related Articles more
Comments