css中通过设置position属性来实现的定位机制,position属性拥有3种定位机制,分别是静态定位,相对定位和绝对定位,并且可以设置4种属性值,分别是static(静态定位),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。absolute和fixed同属于定位机制中的绝对定位(这个不用纠结啊)。
Static属性:无特殊定位,依然处于标准文档流中top,right,bottom,left等属性不会被应用。
relative:属性:设置了相对定位的元素,会以自身初始位置为参照物进行偏移,并且仍然处于标准文档流中,占据标准文档流的空间。同时拥有了z-index属性,也就是空间的z轴层堆叠效果。
如以下代码:
<styletype="text/css">
.box1{height:200px;background:#28EDB9; position:relative; }
.box2{height:200px;background:#F921F8;}
</style>
</head>
<body>
<divclass="box1">box1</div>
<divclass="box2">box2</div>
</body>
当元素设置relative属性时,没有设置偏移量的话,依然处于原位置。那么现在给box1设置偏移量:
<styletype="text/css">
.box1{height:200px;background:#28EDB9; position:relative; top:50px; left:50px;}
.box2{height:200px;background:#F921F8;}
</style>
</head>
<body>
<divclass="box1">box1</div>
<divclass="box2">box2</div>
</body>
absolute属性:设置了absolute属性的元素,会建立以祖先元素为参照的定位,并且完全脱离标准文档流,同样用有z-index属性。如果元素没有设置偏移量的时候,它就会处于初始位置并且宽度随着内容的宽度而增加,并且脱离标准文档流。如以下代码:
<styletype="text/css">
.box1{height:200px;background:#28EDB9; position:absolute;}
.box2{height:400px;background:#F921F8;}
</style>
</head>
<body>
<divclass="box1">box1</div>
<divclass="box2">box2</div>
</body>
如果设置了偏移量,则需要考虑到参照基准的问题了。这又分为两种情况,第一种是没有已经定位的祖先元素(也就是设置了以postion非static方式定位,常用relative属性的包裹层),那么元素就以html标签进行偏移:
<styletype="text/css">
.wrap{height:100px;background:#E0FB1C;}
.box1{height:200px;background:#28EDB9; position:absolute;top:50px; left:50px;}
.box2{height:400px;background:#F921F8;}
</style>
</head>
<body>
<divclass="wrap">
<divclass="box1">box1</div>
</div>
<divclass="box2">box2</div>
</body>
在这段代码中,wrap没有设置以postion非static方式定位,所以元素相对于html标签定位。
如果给wrap设置absolute定位,也就是以postion非static方式定位,会发现它相对于wrap偏移了,为了更清楚演示我设置了margin属性,并且设置了relative(同样的absolute也可以):
<styletype="text/css">
.wrap{height:100px;background:#E0FB1C; position:relative; margin-top:50px;}
.box1{height:200px;background:#28EDB9; position:absolute;top:50px; left:50px;}
.box2{height:400px;background:#F921F8;}
</style>
</head>
<body>
<divclass="wrap">
<divclass="box1">box1</div>
</div>
<divclass="box2">box2</div>
</body>
如果把relative属性去掉,你们会发现很奇妙哦。
如果有多个祖先元素设置了以postion非static方式定位怎么办呢,那么这样他就以距离最近的祖先元素进行参照。