CSS位置の詳しい説明attribute_html/css_WEB-ITnose

Position は CSS の非常に重要な属性です。position 属性を使用すると、要素をその通常の位置、親要素、またはブラウザ ウィンドウに対してオフセットできます。ポジションは初心者が混乱しやすい属性でもあります。この記事では、最も基本的な知識から始めて、ポジション属性に関するいくつかの理論と応用について説明します。

基礎知識

位置属性は位置決めと呼ばれます。これらの種類は要素の生成方法に影響します。

positionの4種類

(1)static

staticはposition属性のデフォルト値で、デフォルトではブロックレベル要素とインライン要素がそれぞれの特性に従って表示されます
(2)relative
relativeは、相対位置としての中国語。この属性を設定すると、要素は上、左、下、右に従ってオフセットされます。重要な点は、元のスペースが保持されることです。次の例を見てみましょう:
HTML コード

1 <div class="relative">2 </div>3 <div></div>

CSS コード

1 div { background: #0094ff; width: 250px; height: 100px; }2         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

レンダリング

相対効果

この例では、div.relative は相対的に配置され、left は 20px、left に設定されます。は 50px に設定されており、親要素に対して相対的にオフセットされており、元のスペースも占有されており、後続の要素はそれを置き換えません。

(3) Absolute

要素が絶対に設定されると、その要素はドキュメント フローから切り離され、元のスペースを占有せず、要素がインライン要素であるかブロックであるかにかかわらず、後続の要素によって置き換えられます。たとえば、インライン要素のスパンを絶対に設定した後、高さと幅の属性を設定できます。次の例を見てください:
HTML コード

1 <span class="absolute">2 </span>3 <div></div>

CSS コード

1 div { background: #0094ff; width: 250px; height: 100px; }2         .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

レンダリング

絶対効果

図に示すように、span タグは絶対位置に設定され、高さと幅は属性を設定でき、元のスペースを占有せず、後続の div 要素で置き換えられます。

4 float 属性では、ブロックを含むという概念について説明しました。位置属性の包含ブロック属性もあります。これについては、いくつかの場合で説明します。

1. ルート要素の包含ブロックは、通常、html 要素として使用されます。ほとんどのブラウザでは、最初は、包含ブロックはビューポートのサイズの四角形です

2. 要素の位置が相対的または静的である場合、その包含ブロックは最も近いブロックレベルのコンテンツ境界になります。ボックス、テーブルセル、またはインラインブロック
例で説明しましょう。

HTML コード

1 <div>2     我是父级元素的内容        3     <div class="relative">4         相对定位元素5     </div>6 </div>

CSS コード

div { background: #0094ff; width: 250px; height: 100px; }.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }

レンダリング

包含ブロック

これは、相対的に配置された要素の包含ブロックです。最も近いブロック レベルのボックス、テーブル セル、またはインライン ブロックのコンテンツ境界。相対的に配置された要素は、その要素を含むブロックに対してオフセットされます。これは、単純に元の位置に対するオフセットとして理解できます。

3. 非ルート要素の包含ブロック。要素の位置が絶対的な場合、包含ブロックは位置が静的ではない最も近い祖先要素です。

簡単に言えば、そのブロックを含むブロックは、位置が静的ではない最初の要素が見つかるまで、親要素から上方向に検索します。

Offset 属性

offset 属性は前の例に関係しており、それを含むブロックに対する要素のオフセットを指し、上、下、左、右を表します。 、下、左、右の順に。それらの値は、特定の数値またはパーセンテージにすることができます。パーセンテージの場合、上と下はそれを含むブロックの高さに対するパーセンテージであり、左と右は幅に対するパーセンテージです。また、負の値に設定すると、要素が含まれるブロックの外に移動する可能性があります。

絶対位置決め

次に、絶対位置決めの詳細を見てみましょう。

基本的な絶対配置

要素が絶対配置に設定されている場合、要素はドキュメント フローから分離され、その要素を含むブロックに対して相対的にオフセットされます。

一般的に、要素を絶対要素の包含ブロックとして相対に設定します。次の例を見てみましょう:

HTML コード

 1     <div class="absolute"> 2         相对于初始包含块定位 3     </div> 4     <br /> 5     <br /> 6     <br /> 7     <br /> 8     <br /> 9     <br />10     <div class="relative">11         <div class="absolute">12             相对于最近relative祖先元素定位13         </div>14     </div>

CSS コード

1 div { background: #0094ff; width: 250px; height: 100px; }2         .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }3         .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }

レンダリング

基本絶対配置

図に示すように、絶対配置された要素が 2 つあります。最初の要素には位置がなく、静的な祖先要素ではないため、その要素を含むブロックは本体であり、本体に従ってオフセットされます。

2 番目の要素は絶対に配置されます。この要素は、親要素に基づいてオフセットされる相対的な親要素を設定します。

绝对定位的重叠问题

元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。看看下面的例子：
HTML代码

1 <div class="relative">2     <div class="absolute">3         相对于最近relative祖先元素定位14     </div>5     <div class="absolute light">6         相对于最近relative祖先元素定位27     </div>8 </div>

CSS代码

1 div { background: #0094ff; width: 250px; height: 100px; }2 .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; }3 .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }4 .light { background: #f3d6d6; top: 70px; left: 80px; }

效果图

绝对定位的重叠问题

我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10，结果如下

绝对定位的重叠问题

如果两个元素的层级相同，则越后面的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。

固定定位

fixed定位很简单，类似与absoulte，但是它的包含块就是浏览器窗口，相对来说简单很多。常见的应用比如固定导航，回到顶部。在这里不再赘述，大家可以查找相关资料。

相对定位

relative定位的元素进行偏移后，不会脱离文档流，还有占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。我们看看下面的例子：
HTML代码

1 <div class="no-relative">2     未相对定位的元素3 </div>4 <div class="minus-margin">5     负margin元素6 </div>

CSS代码

1 div { background: #0094ff; width: 250px; height: 100px; }2 .no-relative { background: #ff6a00; width: 200px; height: 100px; }3 .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }4 .minus-margin { margin-top: -30px; }

效果图

未相对定位时没有覆盖

默认情况下，两个元素都是正常的元素，设置了负的margin属性后，后面的元素会覆盖前面的元素，我们修改第一个元素的class为relative，可以看到效果如下：

相对定位时覆盖

添加了相对定位后，第一个元素就会覆盖其他正常的元素了。

relative属性最经常的一个应用应该是作为absolute元素的包含块了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其包含块。

应用举例

position的应用非常频繁，下面我来说说常见的一些场景：

产品标签

在电商网站中，我们常常可以看到产品的左上角或右上角有一些比如“新品”，“促销”，“热卖”等标签，比如下图：

产品标签

这个是怎么实现的呢，我们来模拟一下：
HTML代码：

1     <div class="product">2         我是产品3         <span class="hot">4             热卖5         </span>6     </div>

CSS代码：

1 .product { width: 150px; height: 150px; background: #0094ff; position: relative; }2    .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }

效果如下：

产品标签

如图所示，右上角有一个标签。原理很简单，就是设置父元素相对定位，标签元素绝对定位，然后相对于父元素偏移到右上角。

自动完成框

自动完成框是一个非常常见的应用，其生成的下拉菜单也是用到了position属性。我们先看看下面的效果：

自动完成输入框

这是一个很简单常见的下来自动完成框，我们来看看它的HTML和CSS代码：
HTML代码

1 <input class="search-box" type="text" placeholder="请输入关键字" value="position" />2   <ul style="left:58px;">3       <li>position属性</li>4       <li>position应用</li>5       <li>position是什么</li>6       <li>position翻译</li>7   </ul>

CSS代码

1 .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }2 ul, li { list-style-type: none; }3 ul { border: 1px solid #ccc; width: 210px; position: absolute; }4 li { padding: 5px; }

这个原理也很简单，通过设置下拉菜单为绝对定位，然后设置其left属性与输入框对齐。

当然position的应用还有很多，比如布局，比如fixed可以用来做固定导航菜单，网页右下角的固定菜单等，有兴趣的同学可以自行查找相关资料进行学习。

总结

position属性是一个容易让初学者迷惑的属性，尤其是absolute和relative的应用。要用好它们，首先要从absolute和relative的基本特性开始了解，理解了他们的特性之后应用起来就得心应手了，了解基本原理后，多多写几个例子从实践中去体会它们的特性，慢慢的就会熟悉了。