CSS层定位（相对定位，绝对定位，固定定位）

时间 2020-01-28 标签 css 定位相对绝对固定

CSS 定位 (Positioning) 属性容许你对元素进行定位。

经过使用 position 属性，咱们能够选择 4 种不一样类型的定位，这会影响元素框生成的方式。css

position 属性值的含义：html

static
没有定位，元素出如今正常的流中top, bottom, left, right ， z-index无效
relative
相对于其直接父元素进行定位top,bottom,left,right，z-index有效
absolute
相对于 static 定位之外的第一个父元素进行定位top, bottom, left, right ， z-index 有效
fixed
相对于浏览器窗口进行定位top, bottom, left, right ， z-index 有效web

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中
top	top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移
overflow	设置当元素的内容溢出其区域时发生的事情
clip	设置元素的形状。元素被剪入这个形状之中，而后显示出来
vertical-align	设置元素的垂直对齐方式
z-index	设置元素的堆叠顺序

–引用于http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative浏览器

固定定位position:fix

不会随浏览器窗口的滚动条滚动而变化总在视线里的元素svg

#a{
width:200px;
height:200px;
border:1px solid blue;
}
position:fixed;
left:100px;
top:100px;
}

相对定位position:relative

List item定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在;就是说把这个盒子设置为相对定位以后而且离开原来的位置，其余盒子并不会来填充这个位置布局
List itemrelative定位的层老是相对于其直接父元素，不管其父元素是什么定位方式code

绝对定位position:absolute

List item定位为absolute的层脱离正常文本流，但与relative的区别:其在正常流中的原位置再也不存在
对于absolute定位的层老是相对于其最近的定义为absolute或relative的父层，而这个父层并不必定是其直接父层
对于absolute定位的层,若是其父层中都未定义absolute或relative，则其将相对body进行定位
~~ ~~
通常来讲，咱们会把父布局设为相对定位，子布局设为绝对定位，这样无论父布局怎么变化，总体的布局是不会变化的
最后是一个例子

层定位实现以下内容（见附件最终效果图）：xml

（1）父元素黑色在最下面，300*300大小，黑色背景。（3分）htm

（2）父元素里面有4个子元素，50*50大小，背景红色，内有文字，分布在四角。blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css定位</title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
            background-color: black;
        }
        #contain{
            margin: 0 auto;
            width:300px;
            height: 300px;
            background-color:black;
            border: 5px solid #fdfff8;
        }
        .e{
            height: 50px;
            width: 50px;
            background-color:red;
        }

        #a{
            float: left;
        }
        #b{
            float: right;
        }
        #c{
            float: left;
            clear: left;
            margin-top: 200px;
        }
        #d{
            float: right;
            clear: right;
           margin-top: 200px;
        }

    </style>
</head>
<body>
    <div id="contain">

        <div id="a"  class="e">
          1
        </div>
        <div id="b" class="e">
           2
        </div>
        <div id="c" class="e">
            3
        </div>  <div id="d" class="e">
        4
    </div>
    </div>

</body>
</html>

效果图是这样的