bottom

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

bottom 은 아래쪽 기준으로 요소의 위치를 지정합니다.

예제 1
bottom 개요 (position 속성 설정에 따라 적용됩니다)
보기
position 설정에 따른 bottom 의 차이점
relative, absolute, fixed 에 따른 차이점 보기





지정안함
absolute
relative
fixed
bottom 이 적용된 예


1
2
3
4
기본 상태 (비교용)
소스
position 설정에 따른 bottom 의 차이점<br>
relative, absolute, fixed 에 따른 차이점 보기
<br><br><br><br><br>

<style type="text/css">
    .css_test {
        border : 3px solid gray;
        height : 100px;
        margin : 0 auto;/* DIV 중앙으로 위치시킴 */
        width : 500px;
    }
    .css_test span {
        bottom : 100px;
        display : inline-block;
        text-align : center;
    }
</style>

<div class="css_test">
    <span>
        <img src="http://superkts.com/img/css/flower273.gif" /><br>지정안함
    </span>
    <span style="position:absolute;" onclick="$(this).hide()">
        <img src="http://superkts.com/img/css/flower273.gif"/><br>absolute
    </span>
    <span style="position:relative;" onclick="$(this).hide()">
        <img src="http://superkts.com/img/css/flower273.gif" /><br>relative
    </span>
    <span style="position:fixed;" onclick="$(this).hide()">
        <img src="http://superkts.com/img/css/flower273.gif" /><br>fixed
    </span>
</div>
bottom 이 적용된 예
<br><br>
<div class="css_test">
    <span>
        <img src="http://superkts.com/img/css/flower272.gif" /><br>1
    </span>
    <span>
        <img src="http://superkts.com/img/css/flower272.gif" /><br>2
    </span>
    <span>
        <img src="http://superkts.com/img/css/flower272.gif" /><br>3
    </span>
    <span>
        <img src="http://superkts.com/img/css/flower272.gif" /><br>4
    </span>
</div>
기본 상태 (비교용)
사용된 CSS (클릭시 보기) : borderbottomdisplayheightmarginpositiontext-alignwidth
설명
설명 대기중
 
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소