css postion 属性区别【原】

2021-10-25 08:29:22

CSS样式中的postion元素有四个属性，即static | absolute | fixed | relative。

static：

默认值。无特殊定位，遵循HTML基本定位规则。

fixed：

固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px);

relative :

对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

absolute：

绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角。

将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>fixed和relative和absolute的区别</title>

<style type="text/css">

    body{color:black;}

    #static  {position:static;  left:100px;top:100px;width:100px;  height:100px;  border:1px solid black;}

    #fixed   {position:fixed;   left:100px;top:100px;width:100px;  height:100px;  background:red;}

    #relative{position:relative;left:100px;top:100px;width:900px;  height:900px;  border:1px solid blue;}

    #absolute{position:absolute;left:100px;top:100px;width:100px;  height:100px;  background:yellow;}

</style>

</head>

<body>

    <div id="static">默认static</div>

    <div id="fixed">fixed固定不变</div>

    <div id="relative">relative滚动

        <div id="absolute">absolute滚动</div>

    </div>

</body>

</html>

效果图:

其它文章

让div固定在顶部不随滚动条滚动【转】==>https://www.cnblogs.com/whatlonelytear/p/5571251.html

码农公寓