定位position
样式position可以设定元素在文档中的位置。会将标签(元素)转换为块级。
其取值如下:
-
static
:静态定位,默认值没有定位,不能设置偏移值(left/top/right/bottom),占用文档流。 -
relative
:相对定位,占用文档流。可以通过设置偏移值改变其位置。它相对于自身的位置做偏移。 -
absolute
:绝对定位,脱离文档流,相对于body做偏移。
绝对定位一般与相对定位结合使用,它相对父级是relative定义的元素做偏移。relative的元素必须是absolute的元素的父级,例如:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrapper{ height: 300px; width: 300px; border: 2px solid red; margin: 0 auto; position: relative; } .box{ height: 100px; width: 100px; border: 2px solid green; position: absolute; left: 50px; top: 100px; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body> </html>
-
fixed
:固定定位,脱离文档流,相对于浏览器窗口左上角(0, 0)做偏移