课程
开始
开始学习
CodeGym /课程 /Frontend SELF ZH /定位类型

定位类型

Frontend SELF ZH
第 21 级 , 课程 0
可用

1.1 static 定位

CSS中的定位定义了元素如何在网页上布局。理解不同的定位类型可以让你创建复杂和动态的布局。现在我们详细介绍每种定位类型：static、relative、absolute、fixed 和 sticky。

static 是所有元素默认的 定位值。使用这种定位的元素按照HTML标记确定的顺序依次出现在文档的正常流中。

使用示例：

CSS 
    
      .static-box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        margin: 10px;
      }
HTML 
    
      <div class="static-box">元素 1</div>
      <div class="static-box">元素 2</div>
      <div class="static-box">元素 3</div>

代码解释：

  • .static-box: 使用 position: static; 的元素，按照文档正常流的顺序依次排列

1.2 relative 定位

relative 允许元素 相对于其在文档流中的正常位置定位。元素仍然在文档流中，但可以通过 top、right、bottom 和 left 属性进行偏移。

使用示例：

CSS 
    
      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .relative-box {
        position: relative;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML 
    
      <div>
        <div class="box">正常元素</div>
        <div class="box relative-box">偏移元素</div>
        <div class="box">正常元素</div>
      </div>

代码解释：

  • .relative-box: 使用 position: relative; 的元素，相对其正常位置下移15像素和右移15像素

1.3 absolute 定位

absolute 允许元素相对于最近的、非 static 定位的祖先进行定位。如果没有这样的祖先，则相对于初始上下文（通常是 <html>）进行定位。

使用示例：

CSS 
    
      .container {
        position: relative;
      }

      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .absolute-box {
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML 
    
      <div class="container">
        <div class="box">正常元素</div>
        <div class="box absolute-box">绝对定位元素</div>
        <div class="box">正常元素</div>
      </div>

代码解释：

  • .container: 使用 position: relative; 的容器，里面有 absolute 元素进行定位
  • .absolute-box: 使用 position: absolute; 的元素，相对于容器定位。 从容器的左上角向下偏移15像素和右移15像素。

1.4 fixed 定位

fixed 允许元素相对于浏览器窗口定位。这样的元素在页面滚动时保持在原位。

使用示例：

CSS 
    
      .container {
        height: 200px;
        overflow: auto;
      }
      .fixed-box {
        position: fixed;
        background-color: #f39c12;
        color: white;
        padding: 20px;
        top: 15px;
        right: 15px;
      }
HTML 
    
      <div class="container">
        <div class="fixed-box">固定元素</div>
        Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
        Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
        Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
        Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
        Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
        Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
      </div>

代码解释：

  • .fixed-box: 使用 position: fixed; 的元素，在页面滚动时保持在原位。 它位于浏览器窗口的右上角。

1.5 sticky 定位

sticky 允许元素表现为 relative，直到滚动到指定位置，此后它将变为固定定位（行为如 fixed）。

使用示例：

CSS 
    
      .sticky-box {
        position: sticky;
        background-color: #8e44ad;
        color: white;
        padding: 20px;
        top: 0;
      }

      .text {
        margin-top: 15px;
      }

      .content {
        height: 200px;
        background-color: #ecf0f1;
        overflow: auto;
      }
HTML 
    
      <div class="content">
        <div class="sticky-box">Sticky 元素</div>
        <div class="text">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
          Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
          Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
          Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
        </div>
      </div>

代码解释：

  • .sticky-box: 使用 position: sticky; 的元素，表现为 relative，直到其顶部边缘达到浏览器窗口的顶部。然后固定在该位置，继续滚动时保持原位

1.6 定位类型比较

定位类型比较：

定位类型 描述 用法
static 默认定位。元素在文档的正常流中按顺序排列。 基本的元素排列。
relative 相对于元素正常位置的定位。 元素偏移而不脱离正常流。
absolute 相对于最近的非 static 定位祖先的定位。 容器内元素的精确定位。
fixed 相对于浏览器窗口的定位。 在页面滚动时保持原位的元素。
sticky 元素在达到指定位置之前表现为 relative，随后固定。 滚动时固定元素。
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION