CSSのdisplayとposition

(2017-05-06)

display

レンダリングに使うボックスを指定する。

outer display type

pのようなブロックレベル要素やspanのようなインラインレベル要素に関わらず、指定したボックスにレンダリングする。

outer display type

<style>
.bg {
  background-color: #22ee22;
  width: 150px;
  height: 50px;
}
</style>

<div>this is <span style="display:none" class="bg">none</span> desu</div>

<div>this is <p style="display:inline" class="bg">inline</p> desu</div>

<div>this is <span style="display:block" class="bg">block</span> desu</div>

<div>this is <span style="display:inline-block" class="bg">inline-block</span> desu</div>

中央寄せ

中央寄せはblockにwidthを設定してmargin autoするか、 親要素でtext-align: centerしてinline(-block)にする。

center

<style>
.bg {
  background-color: #22ee22;
  height: 80px;
}
</style>

<div style="margin: 5 auto" class="bg">block margin</div>

<div style="margin: 5 auto; width: 100px" class="bg">block margin width</div>

<div style="margin: 5 auto; display: inline-block" class="bg">inline-block margin</div>

<div style="text-align: center">
  
  <div style="display: inline-block" class="bg">inline-block align-center</div>
  
  <div style="width: 100px" class="bg">block align-center width</div>
</div>

flex

displayでflexを指定するとflex containerになる。 flex-flowは 表示する方向のflex-directionと 折り返しのflex-wrapのショートハンドプロパティ。

子要素のflexは 伸びるときの倍率のflex-grow(default: 0)と 縮むときの倍率のflex-shrink(default: 1)、 初期サイズのflex-basis(default: auto)の ショートハンドプロパティ。

flex

<style>
.bg {
  background-color: #22ee22;
  width: 150px;
  height: 50px;
}
</style>

<div>
  this is
  <div style="display:flex; flex-flow: row wrap">
    <div style="flex: auto; margin: 2px" class="bg">flex-item1</div>

    <!-- flex-basis -->
    <div style="flex: 300px; margin: 2px" class="bg">flex-item2</div>

    <!-- flex-grow | flex-shrink | flex-basis -->
    <div style="flex: 0 1 30%; margin: 2px" class="bg">flex-item3</div>
  </div>
  desu
</div>

position

relative

この設定を考慮せずにすべての要素を配置した後に設定を適用する。 そのため、この例の3つ目のdivのleft: 30pxは2つ目のdivの元々の位置から30px右になっている。

relative

<style>
.bg {
  display: inline-block;
  background-color: #22ee22;
  width: 150px;
  height: 50px;
}
</style>

<div>
  <div class="bg">aaa</div>
  <div style="position: relative; top: 30px; left: 30px" class="bg">bbb</div>
  <div style="position: relative; left: 30px" class="bg">ccc</div>
</div>

absolute

絶対位置で指定する。位置指定された祖先要素の相対的な位置になる。

absolute

<style>
.bg {
  display: inline-block;
  background-color: #22ee22;
  width: 150px;
  height: 50px;
}
</style>

<div>
  <div class="bg">aaa</div>
  <div style="position: relative; top: 50px">
    <div style="background-color: #eeeeee">relative top 50px</div>
    <div style="position: absolute; top: 50px; left: 300px" class="bg">top 50px; left: 300px</div>
    <div style="position: absolute; left: 100px" class="bg">left 100px</div>
  </div>
</div>

fixed

ビューポートに対して絶対的な位置を指定する。この例では2つ目のfixedなdivはスクロールしてもビューポートに対して位置が固定される。

fixed

<style>
.bg {
  display: inline-block;
  background-color: #22ee22;
  width: 150px;
  height: 50px;
}
</style>

<div style="height: 3000px" class="bg">aaa</div>
<div style="position: fixed; top: 50px; left: 300px" class="bg">top 50px; left: 300px</div>