css之定位 | 易学教程

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
inherit 从父元素继承 position 属性的值

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级，谁的z-index值大，谁的元素就在上层。

典型定位布局

1、固定在顶部的菜单

2、水平垂直居中的弹框

3、固定的侧边的工具栏

4、固定在底部的按钮

示例代码

<head>
    <style type="text/css">
        .con{
               width:400px;
               height:400px;
               border:1px solid #000;
               margin:100px auto 0;
        }
 
        .con div{
               width:200px;
               height:100px;
               margin:20px;  #这个值会影响绝对和固定定位的显示位置
               background-color:gold;
               text-align:center;
               line-height:100px;
               font-size:40px;
        }
        
      
 
        .box01{
                   position:relative;  #设置相对定位
                   left:50px;  #偏移量，和定位配对使用，盒子1以原位置进行定位，向右移动50px，可为负值;
        }
 
        .box02{
                   position:absolute;  #设置绝对定位
                   left:50px;  #这里盒子2会跳出div块，以body元素进行定位，向右移动50px;
        }    
 
        .box03{
                   position:fixed;  #设置固定定位
                   left:50px;  #相对浏览器窗口进行定位，向右移动50px;
        }    
       
        #测试定位元素特性
       .box4{
                  background-color:pink;
                  position:absolute; #不加定位属性，盒子4会在页面上背景色会显示一行，加上后，只会显示盒子4这三个字节的背景色，也就是块元素转变为行内块元素了，因为行内块元素如果没有设置宽高，宽高由内容决定
        }
 
    </style>
</head>
 
<body>
    <div class="con">
        <div class="box01">盒子1</div>
        <div class="box02">盒子2</div>
        <div class="box03">盒子3</div>
    </div>
 
    <div class="box4">盒子4</div>
</body>

来源：https://www.cnblogs.com/regit/p/8930150.html

标签

文档流

绝对定位

position

css