positionプロパティ

Tag:

ボックスの位置を自由に指定するためには、positionプロパティを使用します。

positionプロパティの使用例

まず、基準となる親要素に『position:relative』を指定します。位置を変更したい子要素に『position:absolute』を指定し、topやleftで位置を移動させます。

positionを使用した位置移動
Before After
html
          <dl class="htmlcss_position">
            <dt class="boxa"></dt>
            <dd class="boxb"></dd>
            <dd class="boxc">postionプロパティ使用例</dd>
            <dd class="boxd"></dd>
            <dd class="boxe"></dd>
          </dl>
        
css
dl.htmlcss_position{
    width:200px;
    border:solid 1px #ccc;
}

.htmlcss_position dt.boxa {
    width:180px;
    height:100px;
    background-color:#81D674;
    margin-top:10px;
    margin-left:10px;
}

.htmlcss_position dd.boxb {
    width:100px;
    height:20px;
    background-color:#8BA7D5;
}

.htmlcss_position dd.boxc{
    padding:5px 10px 0px 10px;
    font-size:85.7%;
    line-height:1.5;
    text-align: center;
}

.htmlcss_position dd.boxd {
    width:40px;
    height:20px;
    background-color:#EDA184;
}

.htmlcss_position dd.boxe {
    width:90px;
    height:20px;
    background-color:#EADC83;
}
        
dl.htmlcss_position {
    width:200px;
    border:solid 1px #ccc;
    position:relative;      /*追加*/
    padding-bottom:30px;    /*追加*/
    overflow: hidden;       /*追加*/
}

.htmlcss_position dt.boxa {
    width:180px;
    height:100px;
    background-color:#81D674;
    margin-top:10px;
    margin-left:10px;
}

.htmlcss_position dd.boxb {
    width:100px;
    height:20px;
    background-color:#8BA7D5;
    position:absolute;         /*追加*/
    top:15px;                  /*追加*/
    left:125px;                /*追加*/
    transform:rotate(45deg);   /*追加*/
    -webkit-transform:rotate(45deg); /*追加*/
}

.htmlcss_position dd.boxc{
    padding:5px 10px 0px 10px;
    font-size:85.7%;
    line-height:1.5;
    text-align: center;
}

.htmlcss_position dd.boxd {
    width:40px;
    height:20px;
    background-color:#EDA184;
    position:absolute;      /*追加*/
    bottom:8px;             /*追加*/
    left:150px;             /*追加*/
}

.htmlcss_position dd.boxe {
    width:90px;
    height:20px;
    background-color:#EADC83;
    position:absolute;      /*追加*/
    top:30px;               /*追加*/
    left:50%;               /*追加*/
    margin-left: -45px      /*追加*/
}
        
表示

postionプロパティ使用例

postionプロパティ使用例

boxeは、左右中央に設置しています。leftを50%として、margin-leftをwidthの半分の長さぶんだけマイナスにすれば左右中央に設置できます。

position指定により要素が重なった場合は、html上で下に書かれている要素が画面上で上に表示されます。もし、重なり順を入れ替える場合は、z-indexプロパティを使用します。z-indexプロパティはpositionがstatic以外であれば適用され、値が大きいほど上に表示されます。

スポンサーリンク