絶対配置の共通属性値をマスターして、ページ要素を好きなように配置しましょう-htmlチュートリアル-php.cn

絶対配置の共通属性値をマスターして、ページ要素を好きなように配置しましょう

WBOY

リリース： 2024-01-18 10:01:08

オリジナル

966 人が閲覧しました

絶対配置の共通属性値をマスターして、ページ要素を好きなように配置しましょう

絶対配置の一般的な属性値をマスターして、ページ要素を自由に配置できるようにします。具体的なコード例が必要です。

絶対配置 (絶対配置) Positioning) は、CSS で一般的に使用されます。位置決め属性を使用して、最も近い親要素を基準にして要素を配置できるようにする位置決めメソッドの 1 つです。絶対配置の共通属性値をマスターすることで、ページ要素の位置とレイアウトを簡単に制御できます。

1. 要素の配置の基本概念

絶対配置を使用する前に、いくつかの基本概念を理解する必要があります。親要素は位置決め属性を持つ祖先要素を参照し、子要素は位置決めする必要がある要素を参照します。絶対配置を使用する場合、上、下、左、右などの属性値を設定することで子要素の位置を調整できます。

2. 絶対配置の一般的な属性値

絶対配置では、要素の位置とレイアウトを制御するために次の属性値を使用することがよくあります:

(1) top 属性

top 属性値を設定することで、子要素と親要素の先頭との距離を指定できます。サンプルコードは以下のとおりです。

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    top: 50px;   /* 子元素距离父元素顶部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

ログイン後にコピー

(2)bottom属性

bottom属性値を設定することで、子要素と親要素の下端との距離を指定できます。サンプルコードは以下のとおりです。

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    bottom: 50px;   /* 子元素距离父元素底部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

ログイン後にコピー

(3) left 属性

left 属性の値を設定することで、子要素と親要素の左側との距離を指定できます。サンプルコードは以下のとおりです。

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    left: 50px;   /* 子元素距离父元素左侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

ログイン後にコピー

(4) right 属性

right 属性値を設定することで、子要素と親要素の右側との距離を指定できます。サンプルコードは次のとおりです:

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    right: 50px;   /* 子元素距离父元素右侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

ログイン後にコピー