CSS 位置(position)

  • position属性

    position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值:
    • static
    • relative
    • fixed
    • absolute
    • sticky
    然后使用topbottomleftright属性定位元素。但是,除非首先设置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;相对于其正常位置定位的元素。设置相对定位元素的topbottomleftright属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。
    这个<div>元素的position:relative;
    div.relative {
           position: relative;
           left: 30px;
           border: 3px solid #73AD21;
         }
    尝试一下
  • position:fixed;

    元素position:fixed;相对于视口定位,这意味着即使页面滚动,它也始终保持在同一位置。topbottomleftright属性用于定位元素。固定元素不会在页面中留下通常位于其中的间隙。注意页面右下角的固定元素。
    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样式