文档流中的position定位问题

  • CSS 有三种基本的定位机制:普通流(文档流)、浮动和绝对定位。
    position属性共有四种取值:
    1. static:默认值,即正常文档流的表现形式,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
    2. relative:相对定位,对于其原本位置进行定位,但是其原来所占用的空间依然存在,即不脱离文档流。如”left:20px” 会使元素的left距离原来的位置添加 20 像素。
    3. absolut:绝对定位,相对于 static 定位以外的第一个父元素进行定位。脱离文档流,不占据空间,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
    4. fixed:绝对定位,脱离所有元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  • fixed;生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

    对于定位元素(非static),z-index用来控制层叠元素的显示优先级,值越大优先级越高。默认情况z-index=0,文档流中按顺序谁在后面谁是最外层。

  • relative:生成相对定位的元素,相对于其正常位置进行定位(相对于自身定位)。如”left:20px” 会向元素的 LEFT 位置添加 20 像素.
    absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

  • absolut绝对定位使元素的位置与文档流无关,即脱离文档流,而相对定位后依然占有原来空间,不脱离文档流

    用定位实现水平居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>使用定位实现垂直水平居中</title>
    <style type="text/css">
    .ct{
    /* position: relative;
    height: 800px; 设置高度*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;/* 布满全屏 */
    background: rgba(0,0,0,0.5);/* 灰色 */
    }
    .center{
    width: 80px;
    height: 80px;
    position: absolute;
    top:50%;
    left: 50%;/* 左上角水平居中 */
    margin-left: -40px;
    margin-top: -40px;/* 元素水平居中 */
    background-color: #fff;
    }
    </style>
    </head>
    <body>
    <div class="ct">
    <div class="center"></div>
    </div>
    </body>
文章目录
,