上一节:
下一节:

  CSS 位置（position）

  • position属性

    position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：
    • static
    • relative
    • fixed
    • absolute
    • sticky
    然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。

  • position:static;

    默认情况下，HTML元素定位为静态。静态定位元素不受top，bottom，left和right属性的影响。 元素position:static;没有以任何特殊方式定位; 它总是根据页面的正常流程定位：
    这个<div>元素的position:static; 
    div.static {
       position: static;
       border: 3px solid #73AD21;
     }
    尝试一下

  • position:relative;

    具有position:relative;相对于其正常位置定位的元素。设置相对定位元素的top，bottom，left和right属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。
    这个<div>元素的position:relative; 
    div.relative {
       position: relative;
       left: 30px;
       border: 3px solid #73AD21;
     }
    尝试一下

  • position:fixed;

    元素position:fixed;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top，bottom，left和right属性用于定位元素。固定元素不会在页面中留下通常位于其中的间隙。注意页面右下角的固定元素。 
    div.fixed {
       position: fixed;
       bottom: 0;
       right: 0;
       width: 300px;
       border: 3px solid #73AD21;
     }
    尝试一下

  • position:absolute;

    具有position:absolute;相对于最近定位的祖先定位的元素（而不是相对于视口定位，如fixed）。然而; 如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。 注意： “定位”元素的位置是除了static之外的任何元素。 
    div.relative {
       position: relative;
       width: 400px;
       height: 200px;
       border: 3px solid #73AD21;
     } 

     div.absolute {
       position: absolute;
       top: 80px;
       right: 0;
       width: 200px;
       height: 100px;
       border: 3px solid #73AD21;
     }
    尝试一下

  • position:sticky;

    position:sticky;根据用户的滚动位置定位元素。粘性元素在relative和之间切换fixed，具体取决于滚动位置。它被相对定位，直到在视口中满足给定的偏移位置 - 然后它“粘住”到位（如位置：fixed）。
    注意： Internet Explorer，Edge 15及更早版本不支持粘性定位。Safari需要-webkit-前缀（参见下面的示例）。您还必须指定的至少一个top，right，bottom或left为粘稠的定位工作。
    在此示例中，top: 0当您到达其滚动位置时，粘性元素会粘到页面顶部。 
    div.sticky {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
       padding: 5px;
       background-color: #cae8ca;
       border: 2px solid #4CAF50;
     }
    尝试一下

  • 重叠元素

    当元素定位时，它们可以与其他元素重叠。z-index属性指定元素的堆栈顺序（哪个元素应放在其他元素的前面或后面）。元素可以具有正或负堆栈顺序： 
    img {
         position: absolute;
         left: 0px;
         top: 0px;
         z-index: -1;
       }
    尝试一下
    堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。
    注意：如果两个定位元素在没有z-index指定的情况下重叠，则HTML代码中最后一个元素将显示在顶部。

  • 在图像中定位文本

    .topleft {
         position: absolute;
         top: 8px;
         left: 16px;
       }

       .topright{
         position: absolute;
         top: 8px;
         right: 16px;
       }

       .bottomleft{
         position: absolute;
         bottom: 8px;
         left: 16px;
       }

       .bottomright{
         position: absolute;
         bottom: 8px;
         right: 16px;
       }
    尝试一下

  • 所有CSS定位属性

    属性 描述
    bottom 设置定位框的底部边缘
    clip 剪辑一个绝对定位的元素
    left 设置定位框的左边缘
    position 指定元素的定位类型
    right 设置定位框的右边缘
    top 设置定位框的上边缘
    z-index 设置元素的堆栈顺序

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: