CSS Positioning Tutorials #7-12 정보
CSS Positioning Tutorials #7-12본문
7. Text columns
float를 사용안하고..
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule: 1px solid #ccc; witdth, type, color
column-rule: 1px solid #ccc;
text-align: justify;
8. Position relative
Position property의 종류: Static, Relative, Absolute, Fixed, Inherit
relative는
normal document flow에서 offset
9. Absolute Position
배너 사진 중간에 배너글을 넣을 때..
사진은 relative로 하고 글씨를 absolute로 해서..
글씨가 사진 top-left가 기준되게..
10. fixed Position
fixed는 다큐먼트에 고정됨 왼쪽위부터 시작.
navigation 메뉴를 상단에 고정시킬때
nav{
background: #333;
position: fixed;
top: 0;
left: 0;
width: 100%
}
nav ul:after{
content: "";
display: block;
clear: both;
}
nav li{
list-style-type: none;
margin: 0 10px;
color: #fff;
float: right;
}
11. Z-index & Stacking Order
nav위치를 위쪽으로 옮기면, 우선순위가 낮아 지므로 사진이 위로 올라감.
z-index: 1; 로 우선 순위를 바꿔줌.
12. clipping content
max-height: 150px;
over-flow: hidden;
auto, scroll, visible
0
댓글 0개