[CSS]fixedで要素の位置を固定して配置する

2021年10月4日

書式
position: fixed
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。
この値は、常に新しい重ね合わせコンテキストを作成します。印刷文書の場合、要素は各ページの同じ位置に配置されます。
使用例

<style>
  .cft {
    position: fixed;
    /*windowの上の位置から下に30px*/
    top: 30px;
    /*windowの上の位置から左に30px*/
    left: 30px;
    width: 200px;
    height: 100px;
    /*背景色を指定*/
    background-color: skyblue;
    /*文字色を指定*/
    color: red;
    border: 2px solid #000;
  }
</style>
<body>
　<!--セレクタcftを使用 -->
  <div class="cft">fixed:この値は、常に新しい重ね合わせコンテキストを作成します。</div>
</body>

 

CSS

Posted by arkgame